Vue上传图片并预览
1.input用来接收图片,img用来显示图片,让input变成透明并置于img上<input class="input_image left" type="file" @change="uploadImage($event)" accept="image/*" /><img class="show_input_image left" :src="imgSrc" />css
·
1.input用来接收图片,img用来显示图片,让input变成透明并置于img上
<input class="input_image left" type="file" @change="uploadImage($event)" accept="image/*" />
<img class="show_input_image left" :src="imgSrc" />
css代码
.show_input_image {
position: absolute;
left: 10px;
width: 130px;
height: 130px;
}
.input_image {
position: relative;
width: 130px;
height: 130px;
background-color: blue;
z-index: 999;
opacity: 0;
}
2.再uploadImage中实现预览
uploadImage(e) {
//上传图片并预览
let file = e.target.files[0]; //获取第一个文件
let img = new FileReader();
img.readAsDataURL(file);
console.log("img:",img)
img.onload = ({ target }) => {
this.imgSrc = target.result; //将img转化为二进制数据
console.log("target:",target)
};
}
更多推荐
已为社区贡献2条内容
所有评论(0)