Element Upload上传多文件请求一次接口

Element Upload上传组件，在使用默认的情况下，多个文件上传是多次调用接口。想要多个文件只调用一个接口，就需要替换掉默认的上传方法。

        
        

          将模板文件拖到此处，或
          点击上传
        
        

          下载模板
        
        
提示：仅允许导入“zip”格式文件！
      

需要通过 on-change 钩子函数来对列表进行控制，获取文件列表

handleFileChange(file, fileList) {
      let existFile = fileList.slice(0, fileList.length - 1).find(f => f.name === file.name);
      if (existFile) {
        this.$message.error('当前文件已经存在!');
        fileList.pop();
      }
      this.fileList = fileList;
    }

替换默认的提交方法

submitFileForm() {
      // this.$refs.upload.submit();
      let formData = new FormData()
      this.fileList.forEach(item => {
        formData.append('files', item.raw)
      })
      axios({
        url: process.env.VUE_APP_BASE_API + "/importImage",
        method: 'post',
        headers: {'Authorization': 'Bearer ' + getToken()},
        data: formData
      }).then((data) => {
        console.log(data)
        if (data&& data.code === 0) {
          this.upload.open = false;
          this.reset();
          // 消息提示
          this.$message({
            message: '文件上传成功',
            type: 'success'
            duration: 1500
          })
        } else {
          this.$message.error('文件上传失败')
        }
      })
    }

注释部分就是默认的提交方法，改为axios提交formdata

参考：https://www.cnblogs.com/soldier-cnblogs/p/14842110.html