vue | (view ui) 图片上传，删除，查看

FileReader

<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>

以上大概代码思路~