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 相关文章推荐
制作高质量的JQuery Plugin 插件的方法
Apr 20 Javascript
解决遍历时Array.indexOf产生的性能问题
Jul 03 Javascript
页面回到顶部的三种实现(锚标记,js)
Oct 01 Javascript
JavaScript中的typeof操作符用法实例
Apr 05 Javascript
JavaScript实现给按钮加上双重动作的方法
Aug 14 Javascript
Yarn的安装与使用详细介绍
Oct 25 Javascript
jQuery EasyUI 折叠面板accordion的使用实例(分享)
Dec 25 jQuery
详解Chai.js断言库API中文文档
Jan 31 Javascript
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
mpvue+vuex搭建小程序详细教程(完整步骤)
Sep 30 Javascript
vue+element模态框中新增模态框和删除功能
Jun 11 Javascript
Vue + ts实现轮播插件的示例
Nov 10 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
一个简单安全的PHP验证码类 附调用方法
2016/06/24 PHP
PHP基于接口技术实现简单的多态应用完整实例
2017/04/26 PHP
ThinkPHP框架实现的邮箱激活功能示例
2018/06/15 PHP
用一段js程序来实现动画功能
2007/03/06 Javascript
js变换显示图片的实例
2013/04/16 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
js实现网页倒计时、网站已运行时间功能的代码3例
2014/04/14 Javascript
jquery+ajax验证不通过也提交表单问题处理
2014/12/12 Javascript
js插件YprogressBar实现漂亮的进度条效果
2015/04/20 Javascript
JS实现的Select三级下拉菜单代码
2015/08/20 Javascript
跟我学习javascript的闭包
2015/11/16 Javascript
jQuery+css3实现转动的正方形效果(附demo源码下载)
2016/01/27 Javascript
微信小程序开发探究
2016/12/27 Javascript
js实现五星评价功能
2017/03/08 Javascript
Js实现中国公民身份证号码有效性验证实例代码
2017/05/03 Javascript
基于Cookie常用操作以及属性介绍
2017/09/07 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
layui(1.0.9)文件上传upload,前后端的实例代码
2019/09/26 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
2019/12/17 Javascript
JavaScript实现HTML导航栏下拉菜单
2020/11/25 Javascript
[03:44]2014DOTA2国际邀请赛 71专访:DK战队赛前讨论视频遭泄露
2014/07/13 DOTA
[52:29]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第三局
2016/03/03 DOTA
TensorFlow高效读取数据的方法示例
2018/02/06 Python
使用Python处理Excel表格的简单方法
2018/06/07 Python
Python绘制KS曲线的实现方法
2018/08/13 Python
python exit出错原因整理
2020/08/31 Python
CSS3中媒体查询结合rem布局适配手机屏幕
2019/06/10 HTML / CSS
工程力学专业毕业生求职信
2013/10/06 职场文书
业务经理岗位职责
2013/11/11 职场文书
小学评语大全
2014/04/22 职场文书
2014年个人教学工作总结
2014/12/09 职场文书
出生证明格式
2015/06/15 职场文书
小学课改工作总结
2015/08/13 职场文书
《灰雀》教学反思
2016/02/19 职场文书
Python基础之常用库常用方法整理
2021/04/30 Python
Go语言实现Snowflake雪花算法
2021/06/08 Golang