vue element upload实现图片本地预览
(编辑:jimmy 日期: 2024/11/2 浏览:3 次 )
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="/UploadFiles/2021-04-02/imageUrl">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>现在就可实现图片本地预览了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
下一篇:JS中的算法与数据结构之集合(Set)实例详解