vue ivew 多图上传，查看，删除

知识点

FileReader

template

<div class="container" v-for="(item, index) in imgList :key="index">

    <img :id="item" :src="urlArr[index]">

</div>


<Upload 
    multiple 
    type='drag' 
    :format="['png','jpg','jpeg']" 
    :before-upload="imgUpload">
    
    <div>
        <Icon type="ios-add" size="200"></Icon>
    </div>
    
</Upload>

<script>

export default {
    name: 'upload img',
    data () {
        return {
            i: 0,
            imgList: [],
            urrArr: []
        }
    },
    methods: {
        imgUpload (file) {
        
            // 生成随机名称
            const randomS = Math.random().toString(36).substr(2)
            // 给图片命名,多张图片要注意图片不能重名
            this.imgList.push('img' + randomS)
            
            // 展示图片
            this.showImg (file, this.imgList[this.i])
            // 这里会使用一个i作为指针，来指定我们当前操作的那张图片,没执行一次+1
            this.i++
        },
        // 展示图片
        showImg (file, fileId) {
            // 获取图片元素
            const img = document.querySelector('#' + fileId)
            
            // 展示图片
            const render = new FileReader()
            
            render.onload = (event) => {
                img.src = event.srcElment.result
                this.urlArr.push(event.srcElment.result)
            }
            
            // 将图片复制进入,request到后端
            this.imgArr.push(file)
            
        },
        deleteImg (index) {
            // 注意：删除需要删掉imgArr, urlArr
            this.imgArr.splice(index, 1)
            this.urlArr.splice(index, 1)
            
            //没删除一次，指针-1
            this.i--
        }
    
    }
}

</script>

上面为大概思路