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


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

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

首先是HTML代码:


  选取文件
  上传到服务器
  
只能上传xlsx模板文件,且不超过500kb

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

在这里插入图片描述

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

vue