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

原创

JKJSCERUIVIR 2022-06-23 12:53:07 博主文章分类：Vue ©著作权

©著作权归作者所有：来自51CTO博客作者JKJSCERUIVIR的原创作品，请联系作者获取转载授权，否则将追究法律责任

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