ecarx-uploader

ecarx-uploader

主要用于KSC的大文件上传，通用组件可扩展到其他项目

1.分片上传，断点续传，秒传等

2.拖动文件夹到区域，上传文件内的所有文件

3.目前暂不支持空文件夹

npm i ecarx-uploader -S

关键性代码

具体参考代码路径
ksc/src/components/BigUpload/index.vue


以下仅为扩展参考，不属于大文件上传范畴，属于KSC文件创建阶段
<a-form-item v-else-if="option.key === 'upload'" :label="$t('common.btn.uploadFile')">
  <Uploader :opt="{token:token,uploadUrl:uploadUrl,mergeUrl:mergeUrl}"
    v-decorator="['fileList', { initialValue: [], rules: [{ required: true, message: $t('common.rules.waitComplete') }] }]" />
</a-form-item>
绑定表单fileList

import Uploader from '@/components/BigUpload/index';
import auth from '@/utils/auth';

...

data() {
    return {
      uploadUrl: `${process.env.VUE_APP_API_BASE_URL}/multipartfile/multipartUpload`,
      mergeUrl: `${process.env.VUE_APP_API_BASE_URL}/multipartfile/completeMultipartUpload`,
      token: auth.getToken(),
...

handleUploadFile(params) {
      const { fileList } = params;
      // console.log(JSON.stringify(fileList));
      // return;
      const {
        id, pathId, name: cname, path, step, category,
      } = this.cPath;
      const exist = {};
      let flag = 0;
      const files = fileList.map((file) => {
        // console.log(file);
        let finallyName = '';
        const {
          contentType, downloadUrl, fileId: uid, originalFilename: name, siz, suffix, viewUrl,
        } = file || {};
        finallyName = name.substr(0, name.lastIndexOf('.')) || name;
        const relativePath = file.relativePath || `/${finallyName}${suffix}`;
        // 判断同一路径下是否同名
        // const aliasName = name.split('.')[0];
        const aliasPath = relativePath.substr(0, relativePath.lastIndexOf('.'));
        // console.log(aliasName, exist[aliasName]);
        if (exist[name]) {
          console.log(exist[name].aliasPath === aliasPath);
        }
        if (exist[name] && exist[name].flag && exist[name].aliasPath === aliasPath) {
          flag = 1;
        } else {
          exist[name] = {};
          exist[name].flag = 1;
          exist[name].aliasPath = aliasPath;
        }
        return {
          contentType, downloadUrl, uid, name: finallyName, siz, suffix, viewUrl, relativePath,
        };
      });
      // console.log(flag);
      if (flag) {
        this.$message.error(`${this.$t('pages.fileLib.sameName')}`);
      }
      const obj = {
        pathId: `${pathId}/${id}`,
        path: `${path}/${cname}`,
        step,
        category,
        folderId: id,
        files,
      };
      // console.log(obj.files);
      // return;
      this.fileBatchCreate(obj).then((res) => {
        // console.log(res);
        const { list } = res;
        if (list.length === 0) {
          this.visible = false;
          this.$bus.$emit('refreshList');
          this.$message.success(this.$t('pages.fileLib.createSuccess'));// 创建成功
        } else {
          // list.forEach((item) => {
          this.$message.error(`“${list[0].name}${list[0].suffix}” ${this.$t('pages.fileLib.exist')}`);// 文件名已存在
          // });
        }
        // this.$message[success ? 'success' : 'error'](msg);
      });
    },