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) {},

完成，因為有些地方不好截圖，就這個樣子吧。