element upload支持批量上传且支持不同文件上传不同服务

60 阅读 0 评论 40 点赞

我是靠谱客的博主跳跃帆布鞋，最近开发中收集的这篇文章主要介绍element upload支持批量上传且支持不同文件上传不同服务，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

最近项目中遇到个新需求，添加附件时要支持附件的批量上传。目前项目中附件上传是一个一个上传，图片和其他类型的文件分别上传到不同的服务。原本想是直接加上:multiple="true" 就完事，事实并不如此，先看下代码：

<el-upload
    ref="upload"
    :multiple="true"
   	:action="uploadAction"
    :accept="acceptUpload"
    :auto-upload="true"
    :show-file-list="false"
    :disabled="uploadLoading"
    :before-upload="onUploadChange"
    :on-success="handleUploadSuccess"
>
     <el-button :loading="uploadLoading" :disabled="uploadLoading" icon="el-icon-plus" type="default" plain>
        {{ uploadLoading ? '正在上传...' : '上传附件' }}
      </el-button>
 </el-upload>
 
// ...

methods: {

// ...

// 上传前根据不同文件类型上传到不同服务
onUploadChange(file) {
      if (file.size && file.size / 1024 / 1024 > maxUploadSize) {
        this.$notify({
          type: 'error',
          title: `上传附件大小不能超过${maxUploadSize}MB`,
        });
        return false;
      }
      console.log('%c [onUploadChange]: ', 'color:#1989fa;', file);
      // return true;
      return new Promise((resolve, reject) => {
        this.$nextTick(() => {
          if (file.type.indexOf('image/') > -1) {
            this.uploadAction = Setting.getImgUploadPath();
          } else {
            this.uploadAction = Setting.getFileUploadPath();
          }
          this.uploadLoading = true;
          resolve();
        });
      });
    },
    
    // 上传成功回调
    handleUploadSuccess(res, file, fileList) {
   		 //...
    }
    
// ...

}

如果不是批量上传，不会有问题。但是批量上传后，多个文件是同时上传的，动态修改action值，会导致文件上传拿到的action不一定是相应的action，导致服务报错。

自己又把upload文档反复看了，百度找了一圈，答案甚少，不过感谢element 批量上传文件时，根据文件类型上传到不同的服务器
给了我思路。用http-request，实现自定义上传

代码做了以下修改,使用axios发起接口请求：

<el-upload
    ref="upload"
    :multiple="true"
   	:action="''"
   	:http-request="uploadFile"
    :accept="acceptUpload"
    :auto-upload="true"
    :show-file-list="false"
    :disabled="uploadLoading"
    :before-upload="onUploadChange"
    :on-success="handleUploadSuccess"
>
     <el-button :loading="uploadLoading" :disabled="uploadLoading" icon="el-icon-plus" type="default" plain>
        {{ uploadLoading ? '正在上传...' : '上传附件' }}
      </el-button>
 </el-upload>
 
// ...

methods: {

// ...

// 上传前文件校验
	onUploadChange(file) {
      if (file.size && file.size / 1024 / 1024 > maxUploadSize) {
        this.$notify({
          type: 'error',
          title: `上传附件大小不能超过${maxUploadSize}MB`,
        });
        return false;
      }
      console.log('%c [onUploadChange]: ', 'color:#1989fa;', file);
      return true;

    },
    // 覆盖默认的上传行为
    uploadFile( {file} ) {
      let ossUrl = '';
      if (file.type.indexOf('image/') > -1) {
        console.log('%c [上传图片]: ', 'color:#1989fa;');
        ossUrl = Setting.getImgUploadPath();
      } else {
        console.log('%c [上传附件文件]: ', 'color:#1989fa;');
        ossUrl = Setting.getFileUploadPath();
      }

      let formData = new FormData();
      formData.append('file', file);

      axios.post(ossUrl, formData).then(({ data }) => {
        this.handleUploadSuccess(data, this.$refs.upload.getFile(file), this.$refs.upload.uploadFiles);
      });
    },
    // 上传成功回调
    handleUploadSuccess(res, file, fileList) {
   		 //...
    }
// ...

}

后来发现on-success钩子失效了，需要手动去调用handleUploadSuccess方法和拼参数，感觉不是很好。研究了以下源码，做了以下优化：

<el-upload
    ref="upload"
    :multiple="true"
   	:action="''"
   	:http-request="uploadFile"
    :accept="acceptUpload"
    :auto-upload="true"
    :show-file-list="false"
    :disabled="uploadLoading"
    :before-upload="onUploadChange"
    :on-success="handleUploadSuccess"
>
     <el-button :loading="uploadLoading" :disabled="uploadLoading" icon="el-icon-plus" type="default" plain>
        {{ uploadLoading ? '正在上传...' : '上传附件' }}
      </el-button>
 </el-upload>
 
// ...
import ajax from 'element-ui/packages/upload/src/ajax';  // 使用element的上传请求方式
// ...
methods: {

// ...

// 上传前文件校验
	onUploadChange(file) {
      if (file.size && file.size / 1024 / 1024 > maxUploadSize) {
        this.$notify({
          type: 'error',
          title: `上传附件大小不能超过${maxUploadSize}MB`,
        });
        return false;
      }
      console.log('%c [onUploadChange]: ', 'color:#1989fa;', file);
      return true;

    },
    // 覆盖默认的上传行为
    uploadFile(options) {
      const { file } = options;
      if (file.type.indexOf('image/') > -1) {
        console.log('%c [上传图片]: ', 'color:#1989fa;');
        options.action = Setting.getImgUploadPath();
      } else {
        console.log('%c [上传附件文件]: ', 'color:#1989fa;');
        options.action = Setting.getFileUploadPath();
      }
      this.isUploading = true;
      return ajax(options);
    },
    // 上传成功回调
    handleUploadSuccess(res, file, fileList) {
   		 //...
    }
// ...

}