可以在循环出来的每个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对象。

vue使用element-ui里Upload 上传照片在每次点击添加都会把这个Upload添加每次上传的照片让他对应在自己循环出来的item里怎么写

原文地址: https://www.cveoy.top/t/topic/bYUL 著作权归作者所有。请勿转载和采集!

免费AI点我,无需注册和登录