vue使用element实现本地预览，最主要的是将图片路径转换为base64，供大家参考，具体内容如下
HTML
<el-upload action="123" //这个路径不重要，可以随便写 :show-file-list="false" :on-success="handleAvatarSuccess" :on-change="onchange" :before-upload="beforeAvatarUpload"> <img v-if="imageUrl" :src="imageUrl"> <i v-else></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>
现在就可实现图片本地预览了。