通过v-for循环el-upload,如果在上传事件里面直接取下标会覆盖传送的需要的params.file引起报错
<div class="upload-box" v-for="(item,index) in form.invitationUnits" :key="index">
<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:http-request="handleUpload(params,index)"
>
<img v-if="item.invitationFile" :src='`${imgBaseUrl}${item.invitationFile}`' class="avatar" />
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
</el-upload>
</div>
handleUpload(params,index) {
let fileObj = params.file;
const form = new FormData();
form.append("file", fileObj);
upload(form).then((res) => {
if (res.code == 500) {
this.$message({
showClose: true,
message: res.msg,
type: "warning",
duration: 6000,
});
} else if (res.code == 200) {
this.$message({
showClose: true,
message: "图片上传成功!",
type: "success",
});
}
});
},
正确取到下标的方法
<el-upload
class="avatar-uploader"
action="https://jsonplaceholder.typicode.com/posts/"
:show-file-list="false"
:http-request="(file)=>{return handleUpload(file, index)}"
>