element-上传组件-on-success回调一次的问题

一、element上传组件，使用指令：http-request，就只能回调一次on-success方法

需要手工在http-request方法完成时，拿回调回来的参数 file，主动调用 file.onSuccess()

实际验证之后，自行回调onSuccess也是不可取的。

选择4个文件上传，1个文件成功后，upload组件会自行回调success方法。

我在上传成功后的方法中，执行了file.onSuccess()，只会在第一个文件成功时，执行一次；其余文件上传成功了，执行方法file.onSuccess()，但没有执行成功。

二、如果简单使用action，就可以每次都回调on-success方法 √

贴个不完整的代码

上传组件

<el-upload
      ref="uploadFile"
      v-loading="upLoading"
      :action="uploadUrl"
      :on-success="getFileSuccess"
      :http-request="handleAvatarSuccess">
</el-upload>

方法

async handleAvatarSuccess(file) {
  try {
    var formdata = new FormData()
    formdata.append('file', file.file)
    this.upLoading = true
    const _this = this
    const res = await axios({
      baseURL: '/api',
      url: '/file/uploadUrl',
      method: 'post',
      headers: {
        'Content-type': 'multipart/form-data',
        Authorization: this.token
      },
      data: formdata
    })
    if (![200].includes(res.data.code)) { 

        this.$message.error('上传失败')
        return
    }
    // 主动回调success方法
    file.onSuccess()

  } catch (error) {
    console.error(error)
  }
},


getFileSuccess(response, file, fileList) {
  try {
    console.log('on success')
  } catch (error) {
    console.error(error)
  }
},

但是如果 action配 headers，也是只回调一次。很难形容我写到这句话的复杂心情，想给element敲一锤子。

<el-upload
      ref="uploadFile"
      v-loading="upLoading"
      :headers="uploadHeaders"
      :action="uploadUrl"
      :on-success="getFileSuccess"
      :http-request="handleAvatarSuccess">
</el-upload>

但问题还是要解决的，想了一个解决思路：自行维护一个realFileList和展示用的fileList分开。

我们可以通过定义两个变量：
一个赋初值给upload组件，仅仅只是作为展示使用---fileList；
一个是真实我们要操控的变量，所有的对于文件的操作，包括上传和删除都对这个变量进行操作---realFileList

用户上传完多个文件后，再去回调给父组件。 那怎么知道，上传了几个文件呢。

世间诸多事，实在是事在人为

目前处理思路： 在文件上传的第一次回调，获取

上传组件改造 单个文件成功回调 √ 删除回调 √ 上传完后，本组件预览，更新本组件绑定的 fileList 对应的file的 format、url