vue element upload实现图片本地预览
2019-08-20 11:02
651 查看
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>
现在就可实现图片本地预览了。
以上就是本文的全部内容,希望对大家的学习有所帮助
您可能感兴趣的文章:
相关文章推荐
- vue2.0 使用element-ui里的upload组件实现图片预览效果方法
- vue2.0 使用element-ui里的upload组件实现图片预览效果
- vue.js 实现图片本地预览 裁剪 压缩 上传功能
- jquery.uploadify插件实现图片上传和预览效果
- createObjectURL方法 实现本地图片预览
- jquery.uploadify插件实现图片上传和预览效果
- js实现上传图片本地预览功能以及限制图片的文件大小和尺寸大小
- jsp中js实现本地图片预览基本功能
- 利用FileReader实现上传图片前本地预览
- 实现图片上传前本地预览功能之二
- 【转载】js 实现 本地图片预览
- 实现本地图片预览(ie11,chrome最新版,firefox最新版已测式通过)
- 纯AS代码实现可预览本地图片的flash上传客户端(as3.0)
- 本地图片上传与预览的实现
- vue项目中实现图片预览的公用组件功能
- 纯JS实现本地图片预览的方法
- 利用FileReader实现上传图片前本地预览
- 实现本地图片预览上传的功能
- uploadfile和Image实现图片预览
- Android实现本地图片选择及预览缩放效果