vue element upload实现图片本地预览
程序员文章站
2022-07-06 18:10:58
vue使用element实现本地预览,最主要的是将图片路径转换为base64,供大家参考,具体内容如下
html
vue使用element实现本地预览,最主要的是将图片路径转换为base64,供大家参考,具体内容如下
html
<el-upload class="avatar-uploader" action="123" //这个路径不重要,可以随便写 :show-file-list="false" :on-success="handleavatarsuccess" :on-change="onchange" :before-upload="beforeavatarupload"> <img v-if="imageurl" :src="imageurl" class="avatar"> <i v-else class="el-icon-plus avatar-uploader-icon"></i> </el-upload>
js部分
<script> export default { data() { return { imageurl: '', }; }, methods: { handleavatarsuccess(res, file) { this.imageurl = url.createobjecturl(file.raw); }, beforeavatarupload(file) { const isjpg = file.type === 'image/jpeg'; const islt2m = file.size / 1024 / 1024 < 2; if (!isjpg) { this.$message.error('上传头像图片只能是 jpg 格式!'); } if (!islt2m) { this.$message.error('上传头像图片大小不能超过 2mb!'); } return isjpg && islt2m; }, //当上传图片后,调用onchange方法,获取图片本地路径 onchange(file,filelist){ var _this = this; var event = event || window.event; var file = event.target.files[0]; var reader = new filereader(); //转base64 reader.onload = function(e) { _this.imageurl = e.target.result //将图片路径赋值给src } reader.readasdataurl(file); } } } </script>
现在就可实现图片本地预览了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。