Vue动态表单图片上传后在多输入框重复显示问题求助

你这个问题的核心是全局共享了图片数组——所有表单块都在循环同一个imageListImage，所以不管哪个输入框上传图片，所有块都会显示这张图。每个动态添加的表单块应该有自己独立的图片集合，把图片数据存在对应form.contents项的images和file里就行，别用全局数组。

第一步：修改模板部分 #

把循环展示图片的数据源改成当前表单块的item.images，同时给上传和删除方法传递当前块的索引，让方法知道操作的是哪个块的图片：

<b-row v-for="(item, index_loop) in form.contents" :key="index_loop">
    <!-- 给ttrs传递当前块的索引index_loop -->
    <input type="file" @change="ttrs($event, false, 'listImage', index_loop)" />
    <!-- 循环当前块的item.images，而不是全局的imageListImage -->
    <div v-for="(src, index) in item.images" :key="index">
        <label class="delete-img" @click="deleteImage(index_loop, index, 'listImage')">
            <p>delete</p>
        </label>
        <img v-if="src.isImage" :src="src.url" />
    </div>

    <label v-if="index_loop == 0" @click="addItemForm">
        Add block
    </label>
</b-row>

注：input[type=file]不支持v-model，直接去掉就行，文件通过change事件的$event获取。

第二步：修改脚本部分 #

去掉全局的imageListImage和listImage，所有图片数据存在对应表单块的file和images数组里：

data() {
    return {
        form: {
            contents: [{
                file: [],
                images: [],
            }, ],
        },
        // 删掉全局的imageListImage和listImage
    };
},

methods: {
    addItemForm() {
        const newItem = {
            file: [],
            images: [],
        };
        this.form.contents.push(newItem);
    },

    // 新增参数blockIndex，接收当前表单块的索引
    ttrs(e, flag = false, name, blockIndex) {
        let datas = e.target.files || e.dataTransfer.files;
        this.readFile(datas, flag, name, blockIndex);
    },

    // 新增blockIndex参数，指定操作哪个表单块
    async readFile(files, flag, name, blockIndex) {
        const currentBlock = this.form.contents[blockIndex];
        for (var index = 0; index < files.length; index++) {
            let file = {
                isImage: true,
                url: "",
                no: 0,
                is_thumbnail: true
            };
            var reader = new FileReader();
            reader.onload = (event) => {
                file.url = event.target.result;
                if (name == "listImage") {
                    currentBlock.images.push(file);
                }
            };
            if (name == "listImage") {
                currentBlock.file.push({
                    file: files[index],
                    name: files[index].name
                });
            }
            reader.readAsDataURL(files[index]);
        }
    },

    // 新增blockIndex参数，删除指定块里的指定图片
    deleteImage(blockIndex, imgIndex, name) {
        if (name == "listImage") {
            const currentBlock = this.form.contents[blockIndex];
            currentBlock.file.splice(imgIndex, 1);
            currentBlock.images.splice(imgIndex, 1);
        }
    },
},

关键改动说明 #

1. 数据隔离：每个表单块的图片数据存在自己的file和images数组里，不再共享全局数组，彻底解决重复显示的问题。
2. 传递索引：上传和删除时都传递当前表单块的索引，让方法明确知道操作的是哪个块的数据。
3. 移除无效v-model：input[type=file]不支持v-model，直接去掉避免无效代码。

这样修改后，每个表单块上传的图片只会在自己的块里显示，删除也只会影响当前块的图片，不会互相干扰。

内容的提问来源于stack exchange，提问作者dragonquila