share-fun-web/src/views/photographerManagement/photoVerify/modal/ali-oss-multi.vue

<template>
  <el-dialog
    :title="title"
    :visible.sync="modal"
    :close-on-click-modal="false"
    width="960px"
    @close="
      res => {
        $emit('cancel');
      }
    "
  >
    <el-form ref="form" :model="form"  label-width="100px">

<el-form-item label="关联场景" prop="kindergartenId">
        <SceneSelect v-model="form.kindergartenId" :clearable="false" />
      </el-form-item>
      <el-form-item label="关联活动">
        <ActivitySelect
          v-model="form.activityId"
          :kindergartenId="form.kindergartenId"
          :firstLoad="false"
          :disabled="form.kindergartenId === null"
        />
      </el-form-item>  

      <el-form-item label="图片" prop="urls" required>
    <el-upload
      action
      :http-request="Upload"
      :before-upload="beforeAvatarUpload"
      :on-preview="handlePreview"
      :before-remove="beforeRemove"
      :on-remove="handleRemove"
      :on-success="handleSuccess"
      :on-exceed="handleExceed"
      drag
      multiple
      :limit="limit"
      :file-list="fileList"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">
        将文件拖到此处，或
        <em>点击上传</em>
      </div>
      <div slot="tip" class="el-upload__tip">上传文件大小不能超过 1G</div>
    </el-upload>

    <el-progress v-show="showProgress" :text-inside="true" :stroke-width="15" :percentage="progress"></el-progress>
      </el-form-item>

    </el-form>

  </el-dialog>
</template>

<script>
import { client , getFileNameUUID  } from "@/utils/ali-oss"; // 前面的ali-js文件内的两个封装函数
import { saveItem } from '@/api/photoWarehouse';

export default {
  name: "Upload",
  props: {
    limit: {
      type: Number,
      default: 30
    }
  },
  data() {
    return {
      title: '批量上传照片',
      modal: true,

      form: {
        kindergartenId: null,
        activityId: '',
        urls: []
      },      

      fileList: [], // 文件列
      showProgress: false, // 进度条的显示
      dataObj: {
        region: 'oss-cn-guangzhou',
        accessKeyId: 'LTAI5t8FMLXGzU4pTi9GXWb6',
        accessKeySecret: 'Hz6WOXIVNfpdMphYtf3laHbVoasGlT',
        bucket: 'yxl-kindergarten',
      }, //存签名信息
      progress: 0 //进度条数据
    };
  },
  methods: {
    // 文件超出个数限制时的钩子
    handleExceed(files, fileList) {
      this.$message.warning(`每次只能上传 ${this.limit} 个文件`);
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePreview(file) {},
    // 删除文件之前的钩子
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    // 文件列表移除文件时的钩子
    handleRemove(file, fileList) {},
    // 文件上传成功时的钩子
    handleSuccess(response, file, fileList) {
      this.fileList = fileList;
      // if (response.name) {
      //   this.saveData(response.name);
      // }
    },
    // 文件上传前的校验
    beforeAvatarUpload(file) {
      // if (["video/mp4"].indexOf(file.type) == -1) {
      //   this.$message.error("请上传正确的视频格式");
      //   return false;
      // }
      // const isLt100M = file.size / 1024 / 1024 > 10 && file.size / 1024 / 1024 < 1024;
      // if (!isLt100M) {
      //   this.$message.error("上传视频大小要在10MB~1GB之间哦!");
      //   return false;
      // }
      if(!this.form.kindergartenId) {
        this.$error('请先选择幼儿园')
      }

      const isLt30 = file.name.length < 30;
      if (!isLt30) {
        this.$message.error("上传视频文件名称长度必须要小于30个文字哦!");
        return false;
      }
    },
    // http-request属性来覆盖默认的上传行为（即action="url"），自定义上传的实现
    Upload(file) {
      const _that = this;
      async function multipartUpload() {
        let temporary = file.file.name.lastIndexOf(".");
        let fileNameLength = file.file.name.length;
        let fileFormat = file.file.name.substring(
          temporary + 1,
          fileNameLength
        );
        let fileName = getFileNameUUID() + "." + fileFormat;

        client(_that.dataObj).multipartUpload(`tmp/${fileName}`, file.file, {
          progress: function(p) {
            // todo 每个文件一个进度条？？？如何限定关联的业务参数（幼儿园id、活动id）
            // p进度条的值
            console.log(p);
            _that.showProgress = true;
            _that.progress = Math.floor(p * 100);
          }
        })
        .then(result => {
          //上传成功返回值，可针对项目需求写其他逻辑
          // todo 这里每完成一个文件，会回调一次。这里请求服务端保存业务。照片信息 + 幼儿园 + 活动...
          console.log(result);
          this.saveData(result);
        })
        .catch(err => {
          console.log("err:", err);
        });
      }

      multipartUpload();
    },
    async saveData(obj) {
      const params  = {
        kindergartenId: this.form.kindergartenId,
        activityId: this.form.activityId,
        fileRequest: {
          // todo 补充字段
          originalFilename: 'abc',
          size: 100,
          path: obj.name
        }
      }
      const { success, msg } = await saveItem(params);
      if (success) {
      }      
    }
  }
};
</script>

<style lang="scss" scoped></style>