Vue实现点击上传图片预览图片功能

效果

删除按钮是我自己做的

下面上源代码（如果不理解，请在下面提出问题）

html(采用了element组件)

<div>上传图片：</div><div style="display:flex;flex-wrap: wrap;justify-content:Center"><div v-if="preImg!=''" style="position:relative;display:inline-block;"><img style="width:80px;height:80px;" :src="preImg"><div @click="preImg=''" style="cursor: pointer; position:absolute;top:-10px;left:92%;background:red;color:white;border-radius:50%;height:18px;width:18px;font-weight:bold;text-align:center;line-height:18px">×</div></div><div v-if="preImg==''" style="display:inline-block;"><img style="width:60px;height:60px;margin:10px" @click="onPickFile2(itemIndex,list[itemIndex])" src="@/assets/add.png"><input id="upimg" type="file" ref="fileInput" accept="image/*" @change="getFile2" style="display: none;"></div> </div><div style="margin-top:30px;display:flex;flex-direction:column;justify-content:center;align-items:center;"><el-button style="width:140px">保存</el-button></div>

js

data(){preImg:'', //存放预览的图片postData:{img:'',.},//存放提交的图片}// ---测试上传图片onPickFile2() {this.$refs.fileInput.click();},getFile2: function(e) {// console.log("e是什么",e)let $target = e.target || e.srcElement;let file = $target.files[0];// 上传的图片this.postData.img = file; //存放提交图片var reader = new FileReader();reader.readAsDataURL(file);reader.onload = data => {let res = data.target || data.srcElement;// 预览的图片this.preImg = res.result;};// document.getElementById("upimg").value = ""; //这是能否上传同一张图片的关键console.log("gaidongchenggong");},// ---↑