vue使用el-update组件携带参数一次性传多个文件

el-update的基本使用

基本用法见说明文档即可：https://element.faas.ele.me/#/zh-CN/component/upload#methods

需要注意的是，action 的地址是接口的地址，而不是文件夹所在的位置（我之前以为action是上传到服务器上的文件夹的位置）

el-upload一次性上传多个文件，上传时需要携带参数data

需求是：选择多个文件后，手动点击上传才可上传。而el-upload组件是每个文件都要发送一次上传请求，我们的需求是多个文件在一次请求中完成，并且请求接口时，还需要携带data。效果图：

 

解决办法是：

# 修改 auto-upload 的属性为false，阻止文件自动上传

# 设置 multiple 属性为 true，允许多选文件

# 绑定 on-change，当文件状态改变时，会调用该函数。该函数的主要作用是判断选择的文件是否已经存在以及更新this.fileList，因为当增加文件时，this.fileList不会自动刷新，需要在该函数对this.fileList进行更新。

# 绑定 before-remove，当删除文件时，更新this.fileList

# 绑定 http-request，覆盖默认的上传事件

# 定义上传按钮，设置点击事件，通过FormData对象，将选中的多个文件filed和需要携带的参数data一并上传。

 

代码如下：

   
   
将文件拖到此处，或点击上传
   
只能上传zip/rar文件

 

data() {
    return {
      fileList: [],
      uploadForm: '', //上传的表单
    }
  },

 

    // 当文件改变时，调用这个函数
    // this.fileList不会自动更新，当file改变时，需要在该函数改变this.fileList的值
    fileInfoChange(file, fileList) {
      // file是更改的文件， fileList是当前的文件列表
      // 判断文件是否存在
      let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name);
      if(existFile){
        this.$message.error(file.name + '已经存在！');
        fileList.pop();
      }
      // 将this.fileList更新
      this.fileList = fileList;
    },

    //删除文件之前的钩子，参数为上传的文件和文件列表
    deleteFile(file, fileList){
      this.fileList = fileList;
    },

    //http-request函数，将单个文件append进表单中
    filesUpload(file){
      this.uploadForm.append("file", file.file)
    },

    //上传按钮
    uploadFiles(){
      if(this.fileList.length != 0){
        this.uploadForm = new FormData(); //初始化表单
        this.$refs.upload.submit(); //调用submit()函数后，会自动调用filesUpload函数
        let data = JSON.stringify({
          "pid": 1
        }) // 携带上传的参数
        this.uploadForm.append("data", data); //将参数append表单
        console.log("表单：", this.uploadForm.getAll('file'));
        axios({
          method: 'post',
          url: url,
          data: that.uploadForm
        }).then((res) => {
          this.close(); //上传成功后调用
        })
      }else{
        this.$message.error('请选择文件')
      }
    },

 

注意的是， :http-request 绑定的函数（filesUpload）的参数是file，是单个文件。执行 this.$refs.upload.submit(); 后，将循环把文件列表（this.fileList）中的文件依次调用 filesUpload 函数，把每一个文件都 append 进表单中。