Vue实现点击上传图片预览图片功能
效果删除按钮是我自己做的下面上源代码(如果不理解,请在下面提出问题)html(采用了element组件)<div>上传图片:</div><div style="display:flex;flex-wrap: wrap;justify-content:Center"><...
·
效果
删除按钮是我自己做的
下面上源代码(如果不理解,请在下面提出问题)
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");
},
// ---↑
更多推荐
已为社区贡献36条内容
所有评论(0)