vue element upload实现图片本地预览


Posted in Javascript onAugust 20, 2019

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>

现在就可实现图片本地预览了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
关于Mozilla浏览器不支持innerText的解决办法
Jan 01 Javascript
基于jquery的多功能软键盘插件
Jul 25 Javascript
javascript 回调函数详解
Nov 11 Javascript
理解jQuery stop()方法
Nov 21 Javascript
js中判断变量类型函数typeof的用法总结
Aug 09 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
Dec 06 Javascript
JS计算距当前时间的时间差实例
Dec 29 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
JS+CSS3实现的简易钟表效果示例
Apr 13 Javascript
vue 实现websocket发送消息并实时接收消息
Dec 09 Javascript
Javascript var变量删除原理及实现
Aug 26 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
Sep 01 Javascript
JS中的算法与数据结构之集合(Set)实例详解
Aug 20 #Javascript
Vue + Element UI图片上传控件使用详解
Aug 20 #Javascript
微信小程序项目总结之记账小程序功能的实现(包括后端)
Aug 20 #Javascript
ES6中Symbol、Set和Map用法详解
Aug 20 #Javascript
Vue+Element UI+vue-quill-editor富文本编辑器及插入图片自定义
Aug 20 #Javascript
node中使用log4js4.x版本记录日志的方法
Aug 20 #Javascript
vue 获取视频时长的实例代码
Aug 20 #Javascript
You might like
世界收音机发展史
2021/03/01 无线电
PHP中的array数组类型分析说明
2010/07/27 PHP
php模板函数 正则实现代码
2012/10/15 PHP
php简单实现屏蔽指定ip段用户的访问
2015/04/29 PHP
ThinkPHP删除栏目(实现批量删除栏目)
2017/06/21 PHP
PHP中rename()函数的妙用讲解
2019/02/28 PHP
php使用lua+redis实现限流,计数器模式,令牌桶模式
2019/04/04 PHP
分享JavaScript获取网页关闭与取消关闭的事件
2013/12/13 Javascript
jquery 删除字符串最后一个字符的方法解析
2014/02/11 Javascript
JS设置网页图片vspace和hspace属性的方法
2015/04/01 Javascript
JS实现不规则TAB选项卡效果代码
2015/09/16 Javascript
js实现网页收藏功能
2015/12/17 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
jquery uploadify隐藏上传进度的实现方法
2017/02/06 Javascript
vue中路由验证和相应拦截的使用详解
2017/12/13 Javascript
angularjs http与后台交互的实现示例
2018/12/21 Javascript
express启用https使用小记
2019/05/21 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
Js代码中的span拼接问题解决
2019/11/22 Javascript
浅谈js中的attributes和Attribute的用法与区别
2020/07/16 Javascript
Python选择排序、冒泡排序、合并排序代码实例
2015/04/10 Python
python使用htmllib分析网页内容的方法
2015/05/08 Python
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
Python cookbook(字符串与文本)在字符串的开头或结尾处进行文本匹配操作
2018/04/20 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
python如何使用Redis构建分布式锁
2020/01/16 Python
Python 调用有道翻译接口实现翻译
2020/03/02 Python
Html5实现首页动态视频背景的示例代码
2019/09/25 HTML / CSS
小学岗位竞聘方案
2014/01/22 职场文书
货车司机岗位职责
2014/03/18 职场文书
药品营销策划方案
2014/06/15 职场文书
幼儿园感恩节活动方案2014
2014/10/11 职场文书
工伤私了协议书范本
2014/11/24 职场文书
丧事主持词
2015/07/02 职场文书
Go语言基础函数基本用法及示例详解
2021/11/17 Golang
Python实现视频自动打码的示例代码
2022/04/08 Python