vue使用element-ui里Upload 上传照片在每次点击添加都会把这个Upload添加每次上传的照片让他对应在自己循环出来的item里怎么写
可以在循环出来的每个item中给Upload组件绑定一个唯一的标识符,例如使用item的id作为标识符。然后在上传成功后,通过这个标识符来确定上传的照片对应的是哪个item,可以使用一个字典对象来保存每个标识符对应的item对象,例如:
<template>
<div v-for="item in items" :key="item.id">
<el-upload
:action="uploadUrl"
:on-success="handleUploadSuccess(item.id)"
:before-upload="beforeUpload"
>
<el-button slot="trigger">上传照片</el-button>
</el-upload>
<img :src="item.photoUrl">
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: 'item1', photoUrl: '' },
{ id: 2, name: 'item2', photoUrl: '' },
{ id: 3, name: 'item3', photoUrl: '' },
],
itemMap: {}, // 保存每个标识符对应的item对象
};
},
methods: {
beforeUpload(file) {
// 验证文件类型和大小等
},
handleUploadSuccess(itemId) {
return (response, file, fileList) => {
// 上传成功后更新对应的item的photoUrl
const item = this.itemMap[itemId];
if (item) {
item.photoUrl = response.data.url;
}
};
},
},
mounted() {
// 初始化itemMap对象
this.items.forEach((item) => {
this.itemMap[item.id] = item;
});
},
};
</script>
上面的代码中,给每个Upload组件绑定了一个唯一的标识符item.id,并在上传成功后通过这个标识符来确定上传的照片对应的是哪个item。同时使用一个字典对象itemMap来保存每个标识符对应的item对象,方便在上传成功后更新对应的item的photoUrl。在mounted钩子函数中初始化itemMap对象。
原文地址: https://www.cveoy.top/t/topic/bYUL 著作权归作者所有。请勿转载和采集!