使用element-plus的el-upload：1.手动上传2.第二次上传无效3.多图上传保留成功去除失败4.请求头添加token5.请求添加其他参数

 <el-upload
  :action="uploadImgUrl"
  :auto-upload="false"
  list-type="picture-card"
  v-model:file-list="resFileList"
  :on-success="uploadImgSuccess"
  :on-error="handleError"
  ref="resUpload"
  :headers="headers"
  :data="uploadData"
  >
  <p>点击上传p>
el-upload>
<el-button @click="submit">确认上传el-button>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

手动上传

设置:auto-upload="false"不自动上传文件

点击确认上传时再进行图片上传

submit() {
  this.$refs["resUpload"].submit()
  }
1
2
3

第二次上传无效

按照上方的代码写，会发现只能上传第一次会触发请求接口，再点就没反应了

网上搜，基本都是让调组件的clearFiles方法清除文件列表，但是我的需求是，上传完保留上次上传的图片，供下次继续上传，所以不符合我的需求

this.$refs["resUpload"].clearFiles()
1

仔细研究下，发现实际上是因为el-upload绑定的文件列表变量（比如上方代码是resFileList）中的每个文件对象的status属性值不是ready

选择文件后还没上传，这时打印文件列表变量，每个文件对象的status值是ready

上传文件后打印文件列表变量，根据上传情况，每个文件对象的status值会被更改为success,fail,uploading这三种，而只有ready值的文件对象会被this.$refs["resUpload"].submit()提交

所以，想上传完保留上次上传的图片供下次继续上传，可以这样写

 this.resFileList.forEach(item => {
  item.status = "ready"
})
1
2
3

多图上传

el-upload组件默认多图上传是多次调用上传图片接口

通过判断文件列表的status都是success判断正常调用上传接口了

调用上传接口不代表上传就成功了，再判断code===200（根据个人的后端接口规范）判断图片都上传成功了

    // on-success文件上传成功时的钩子,上传三张图片就会触发三次这个钩子
    async uploadImgSuccess(response) {
      // 每次上传返回code不对，就相应报错（根据个人的后端接口规范调整）
      if (response.code !== 200) {
        this.$message.error(response.msg)
      }
      // 通过判断上传文件列表数组的status全为success来判断所有图片都上传了
      if (this.fileList.every(item => item.status === "success")) {
        // 所有图片都上传成功，才执行后续方法
        if (this.fileList.every(item => item.response.code === 200)) {
          ...
        }
        // 如果有图片未上传成功，就过滤掉不成功的，保留成功的，让用户再次选择
        else {
          this.fileList = this.fileList.filter(item => item.response.code === 200)
          // fix：el-upload组件第二次点击上传无效
          // 因为el-upload组件的上传会判断文件列表的status状态，如果不是ready，则不会上传
          this.fileList.forEach(item => {
            item.status = "ready"
          })
        }
      }
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

请求头添加token

给el-upload组件的headers属性，绑定一个对象就可以了

data() {
    return {
      headers: { token: localStorage.getItem("token") }
    }
  },
1
2
3
4
5

请求添加其他参数

给el-upload组件的data属性，绑定一个对象就可以了

data() {
    return {
      uploadData: {}
    }
  },
1
2
3
4
5

例如，后端希望我每次再传一个uuid

const id = this.uuid()
this.uploadData = {
  id
}
this.$refs["resUpload"].submit()
1
2
3
4
5