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>现在就可实现图片本地预览了。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
最新资源
- 【中国民乐】张维良《秋江夜泊》2004[FLAC+CUE]
- 明达年度发烧碟MasterSuperiorAudiophile2011[D
- 明达年度发烧碟MasterSuperiorAudiophile2017[D
- 翁立友.2008-恨孤单【大旗】【WAV+CUE】
- 群星.2009-Magic.Cover日粤精华3CD【环球】【WA
- 华少翌.2005-华少翌【中唱艺能】【WAV+CUE】
- 群星《十二女声Ⅱ》[WAV/CUE/分轨][527MB]
- 大自然音乐系列《漫步在山裡》[WAV/CUE/分轨][5
- 大自然音乐系列《星光夜语》[WAV/CUE/分轨][453
- 史依弘《史依弘交响乐京剧演唱专辑HQ》头版限量