时间:2021-05-26
最近项目一直在使用vue,以前只是用vue做过一些简单的demo对数据进行增删改,并没有用于实际开发项目。今天就想了解一下如何用vue实现常见的图片上传前本地预览效果。
效果预览:
<template> <div class="image-view"> <div class="addbox"> <input type="file" @change="getImgBase()"> <div class="addbtn">+</div> </div> <div class="view"> <div class="item" v-for="(item, index) in imgBase64"> <span class="cancel-btn" @click="delImg(index)">x</span> <img :src="item"> </div> </div> </div></template><script> export default { name: 'imageView', data (){ return { imgBase64:[] //存储img base64的值将值传给后端处理 } }, methods: { //获取图片base64实现预览 getImgBase(){ var _this = this; var event = event || window.event; var file = event.target.files[0]; var reader = new FileReader(); //转base64 reader.onload = function(e) { _this.imgBase64.push(e.target.result); } reader.readAsDataURL(file); }, //删除图片 delImg(index){ this.imgBase64.splice(index,1); } } }</script><style scoped> *{margin:0 auto;padding:0;font-family:"微软雅黑";} .clearboth::after{ content:""; display:block; clear:both; } .image-view{ width:400px; height:300px; margin:50px auto; } .image-view .addbox{ float:left; position:relative; height:100px; width:100px; margin-bottom:20px; text-align:center; } .image-view .addbox input{ position:absolute; left:0; height:100px; width:100px; opacity:0; } .image-view .addbox .addbtn{ float:left; height:100px; width:100px; line-height:100px; color:#fff; font-size:40px; background:#ccc; border-radius:10px; } .image-view .item { position:relative; float:left; height:100px; width:100px; margin:10px 10px 0 0; } .image-view .item .cancel-btn{ position:absolute; right:0; top:0; display:block; width:20px; height:20px; color:#fff; line-height:20px; text-align:center; background:red; border-radius:10px; cursor:pointer; } .image-view .item img{ width:100%; height:100%; } .image-view .view{ clear:both; }</style>以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了js上传图片预览的方法,供大家参考,具体内容如下图片上传本地预览#preview{width:260px;height:190px;bord
本文实例为大家分享了js实现图片上传本地预览效果的具体代码,供大家参考,具体内容如下Documentlabel{display:inline-block;wid
1、vue图片上传,使用elementUI上传组件自己写点击上传2、上传图片,并实时更新修改过后的图片method:{uploadImg(item){varis
本文实例讲述了Vue+Node.js+MongoDB图片上传组件实现图片预览和删除功能。分享给大家供大家参考,具体如下:公司要写一些为自身业务量身定制的的组件,
图片预览的javascript本地操作早期浏览器,不能将本地图片作为页面元素处理,要实现图片预览需要将图片先上传到服务器,再从服务器取得进行预览现代的浏览器功能