element如何在循环中让点击的当前对象获取到当前上传文件的文件名？

Question

这个表格是循环一个数组里的对象生成的，有7个对象和7个上传组件，上传文件后，图中的文本<上传文件>换成已上传文件的文件名，但是<el-upload>并没有提供相应的events把当前点击的对象和当前的上传文件联系起来，如何处理这种情况？自己想了两个办法都行不通

如果通过点击事件来存储点击的对象，因为上传文件是异步的，文件小的几kb上传快，有的文件大的几mb上传慢，如果第一个上传的文件在第二个上传的文件之后完成，那么这样就出错了

问题已经解决了，非常感谢大家的回答

Answer 1

上传文件的标签要独立，在上传的时候让后台添加一个上传参数为上传文件类型(具体的使用数字还是文字你们决定，只要能区分是什么类型的就可以)，上传成功之后要求后台把这个上传时候发过去的文件类型返回，前端做区分。

Answer 2

before-upload时不是可以获取file吗？

beforeAvatarUpload(file) {
console.log(file.name);
}

这个file.name就是文件名，上传成功后赋值就行了

Answer 3

<el-upload @on-success="handleFileUploaded"></el-upload>

handleFileUploaded(response, file, fileList) {
    //response是后台返回给你的数据
    //通过后台的返回是功能测试报告还是性能测试报告
    //你再把file.name放到相应的对象里去
}

Answer 4

可以用闭包实现：

<el-upload
  :on-change="(file, fileList) => onChange(file, fileList, index)"
>
  <template #default><i class="el-icon-plus"></i></template>
</el-upload>

onChecksChange(file, fileList, index) {
  console.log(file, fileList, index)
},

关键是上面的 index。使用了闭包的特性。