Vue+Element-UI实现上传图片并压缩


Posted in Javascript onNovember 26, 2019

Vue+Element-UI 上传图片并压缩,供大家参考,具体内容如下

1.版本

Vue:2.5.2
Element-UI:2.12.0

可实现图片上传前,自动压缩。
Element-UI组件,详情见 官网。

2.template部分

<el-form-item label="照片">
  <el-upload
  accept="image/*"
  class="avatar-uploader"
  :action="uploadPath"
  :show-file-list="false"
  :on-success="handleAvatarSuccess"
  :before-upload="beforeAvatarUpload">
  <img v-if="imgUrl" :src="imgUrl" class="avatar">
  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
 </el-upload>
</el-form-item>

3.script部分

data() {
  return {
   //压缩质量
   imgQuality: 0.5,
   imageUrl: ''
}
methods: {
 handleAvatarSuccess(res, file) {
  // 服务器返回结果处理
 },
 dataURItoBlob(dataURI, type) {
  var binary = atob(dataURI.split(',')[1]);
  var array = [];
  for(var i = 0; i < binary.length; i++) {
   array.push(binary.charCodeAt(i));
  }
  return new Blob([new Uint8Array(array)], {type: type});
 },
 beforeAvatarUpload(file) {
  const _this = this
  return new Promise(resolve => {
   const reader = new FileReader()
   const image = new Image()
   image.onload = (imageEvent) => {
    const canvas = document.createElement('canvas');
    const context = canvas.getContext('2d');
    const width = image.width * _this.imgQuality
    const height = image.height * _this.imgQuality
    canvas.width = width;
    canvas.height = height;
    context.clearRect(0, 0, width, height);
    context.drawImage(image, 0, 0, width, height);
    const dataUrl = canvas.toDataURL(file.type);
    const blobData = _this.dataURItoBlob(dataUrl, file.type);
    resolve(blobData)
   }
   reader.onload = (e => { image.src = e.target.result; });
   reader.readAsDataURL(file);
  })
 }
}

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

Javascript 相关文章推荐
一段实时更新的时间代码
Jul 07 Javascript
W3C Group的JavaScript1.8 新特性介绍
May 19 Javascript
学习面向对象之面向对象的基本概念:对象和其他基本要素
Nov 30 Javascript
jqgrid 简单学习笔记
May 03 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
Mar 27 Javascript
浅谈关于JavaScript的语言特性分析
Apr 11 Javascript
浅析javascript的return语句
Dec 15 Javascript
JQuery点击行tr实现checkBox选中的简单实例
May 26 Javascript
AngularJS 路由和模板实例及路由地址简化方法(必看)
Jun 24 Javascript
js模拟支付宝密码输入框
Apr 11 Javascript
解决Jstree 选中父节点时被禁用的子节点也会选中的问题
Dec 27 Javascript
Vue element-ui父组件控制子组件的表单校验操作
Jul 17 Javascript
jQuery实现轮播图效果
Nov 26 #jQuery
JavaScript使用百度ECharts插件绘制饼图操作示例
Nov 26 #Javascript
使用vue重构资讯页面的实例代码解析
Nov 26 #Javascript
vue keep-alive列表页缓存 详情页返回上一页不刷新,定位到之前位置
Nov 26 #Javascript
JavaScript的变量声明与声明提前用法实例分析
Nov 26 #Javascript
vue中keep-alive,include的缓存问题
Nov 26 #Javascript
JS插件amCharts实现绘制柱形图默认显示数值功能示例
Nov 26 #Javascript
You might like
解决163/sohu/sina不能够收到PHP MAIL函数发出邮件的问题
2009/03/13 PHP
PHP中的strtr函数使用介绍(str_replace)
2011/10/20 PHP
php常用字符串处理函数实例分析
2014/11/22 PHP
javascript 写类方式之二
2009/07/05 Javascript
基于jquery DOM写的类似微博发布的效果
2012/10/20 Javascript
基于jquery自己写tab滑动门(通用版)
2012/10/30 Javascript
简述jQuery ajax的执行顺序
2016/01/05 Javascript
Bootstrap组件学习之导航、标签、面包屑导航(精品)
2016/05/17 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
2016/07/04 Javascript
H5基于iScroll实现下拉刷新和上拉加载更多
2017/07/18 Javascript
带你快速理解javascript中的事件模型
2017/08/14 Javascript
vue.js 嵌套循环、if判断、动态删除的实例
2018/03/07 Javascript
React中的render何时执行过程
2018/04/13 Javascript
Vue三层嵌套路由的示例代码
2018/05/05 Javascript
详解使用Next.js构建服务端渲染应用
2018/07/10 Javascript
Vue2.0点击切换类名改变样式的方法
2018/08/22 Javascript
构建大型 Vue.js 项目的10条建议(小结)
2019/11/14 Javascript
基于JavaScript实现轮播图效果
2021/01/02 Javascript
详解django中自定义标签和过滤器
2017/07/03 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
Python获取指定文件夹下的文件名的方法
2018/02/06 Python
django多文件上传,form提交,多对多外键保存的实例
2019/08/06 Python
python SocketServer源码深入解读
2019/09/17 Python
Python实现图片裁剪的两种方式(Pillow和OpenCV)
2019/10/30 Python
python GUI库图形界面开发之PyQt5菜单栏控件QMenuBar的详细使用方法与实例
2020/02/28 Python
Django 再谈一谈json序列化
2020/03/16 Python
纯CSS实现预加载动画效果
2017/09/06 HTML / CSS
广州一家公司的.NET面试题
2016/06/11 面试题
计算机应用专业毕业生求职信
2013/10/24 职场文书
金融专业毕业生推荐信
2013/11/26 职场文书
优秀的茶餐厅创业计划书
2014/01/03 职场文书
大学生学年个人总结
2015/02/15 职场文书
工作简报格式范文
2015/07/21 职场文书
2016年第32个教师节红领巾广播稿
2015/12/18 职场文书
python Polars库的使用简介
2021/04/21 Python
Nginx反向代理学习实例教程
2021/10/24 Servers