vue使用 el-upload 上传文件附加参数

vue使用 el-upload 上传文件附加参数

这个需求是 一个上传文件的按钮，点击之后选择文件，可以多选，选完之后不上传文件，需要对文件进行配置，也就是添加额外的参数，添加完成之后，点击上传按钮，把文件以及响应文件的参数上传到服务器上去，然后是一个一个提交。

首先是HTML代码：

<el-upload class="upload-demo" ref="upload" action="https://jsonplaceholder.typicode.com/posts/"
        :file-list="fileList" :auto-upload="false" :headers="{token: $cookie.get('token')}" :on-change="handleChange"
        :multiple='true' :show-file-list='false' :data='uploadData'>
  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
  <div slot="tip" class="el-upload__tip">只能上传xlsx模板文件，且不超过500kb</div>
</el-upload>

JS代码：

submitUpload() {
   // this.$refs.upload.submit(); // 原始提交事件
   for (let i = 0; i < this.fileList.length; i++) {
     let fd = new FormData()
     fd.append('name', '文件名字')
     fd.append('type', '类型一')
     fd.append('file', this.fileList[i].raw)
     this.upDataFile(fd);
   }
},

// 上传文件
upDataFile(fileData) {
  this.$http({
    url: `/mouldApi/mould/importOne`,
    method: 'post',
    data: fileData,
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then(({ data }) => {
    if (data.message) {
      this.$message({
      message: data.message,
      type: 'success'
     });
  }
 })
},
handleChange(files, fileList) {},

完成，因为有些地方不好截图，就这个样子吧。