html

<div class="uploadlist">
                <div class="uploadlistitem" v-for="(item,index) in list2" :key="index">
                    <img class="uploadximg" :src="item" alt="">
                    <img @click="deleteimg(index)" class="closeimg" src="images/closeimg.png" alt="">
                </div>
                <input
                        type="file"
                        ref="clearFile"
                        style="display:none"
                        @change="upload($event)"
                        class="add-file-right-input"
                />
                <img @click="goFile" class="uploadimg" src="images/uploadimg.png" alt="">
            </div>

js

    var vm = new Vue({
        el: "#home",
        data: {
            active: 0,
            content: '',
            title: '',
            showbg: true,
            list2: [],
            imgfiles: [],
        },
        watch: {
            content() {
            }
        },
        mounted: function () {
        },
        methods: {
            goFile() {
                this.$refs.clearFile.click();//上传文件
            },
            deleteimg(e) {
                this.list2.splice(e, 1)
            },
            upload(event) {
                var that = this;
                var reader = new FileReader();
                reader.readAsDataURL(event.target.files[0]);
                //4. 因为文件读取是一个耗时操作， 所以它在回调函数中，才能够拿到读取的结果
                reader.onload = function () {
                    window.console.log(reader.result);
                    that.list2.push(reader.result);
                };
                that.$refs.clearFile.value = ""; //上传文件后重置
            },
        },
    })