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 相关文章推荐
经典的解除许多网站无法复制文字的绝招
Dec 31 Javascript
JavaScript 事件系统
Jul 22 Javascript
jQuery中绑定事件的命名空间详解
Apr 05 Javascript
判断一个对象是否为jquery对象的方法
Mar 12 Javascript
验证码在IE中不刷新而谷歌等浏览器正常的解决方案
Mar 18 Javascript
兼容所有浏览器的js复制插件Zero使用介绍
Mar 19 Javascript
jQueryMobile之Helloworld与页面切换的方法
Feb 04 Javascript
原生js实现类似弹窗抖动效果
Apr 02 Javascript
javascript 动态修改css样式方法汇总(四种方法)
Aug 27 Javascript
JS模仿腾讯图片站的图片翻页按钮效果完整实例
Jun 21 Javascript
如何将Node.js中的回调转换为Promise
Nov 10 Javascript
关于Javascript闭包与应用的详解
Apr 22 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
PHP排序算法的复习和总结
2012/02/15 PHP
实用的简单PHP分页集合包括使用方法
2013/10/21 PHP
ThinkPHP路由详解
2015/07/27 PHP
WordPress导航菜单的滚动和淡入淡出效果的实现要点
2015/12/14 PHP
php时间计算相关问题小结
2016/05/09 PHP
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
使图片旋转的3种解决方案
2013/11/21 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
javascript抽象工厂模式详细说明
2014/12/16 Javascript
Javascript aop(面向切面编程)之around(环绕)分析
2015/05/01 Javascript
原生js封装二级城市下拉列表的实现代码
2016/06/16 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
Vue 3.0双向绑定原理的实现方法
2019/10/23 Javascript
[01:45]DOTA2众星出演!DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
详解Python中映射类型的内建函数和工厂函数
2015/08/19 Python
python排序函数sort()与sorted()的区别
2018/09/18 Python
使用pyinstaller打包PyQt4程序遇到的问题及解决方法
2019/06/24 Python
python3 enum模块的应用实例详解
2019/08/12 Python
python元组和字典的内建函数实例详解
2019/10/22 Python
Python多线程获取返回值代码实例
2020/02/17 Python
彻底搞懂 python 中文乱码问题(深入分析)
2020/02/28 Python
OpenCV Python实现拼图小游戏
2020/03/23 Python
Python面向对象魔法方法和单例模块代码实例
2020/03/25 Python
python使用yaml 管理selenium元素的示例
2020/12/01 Python
使用CSS3美化HTML表单的技巧演示
2016/05/17 HTML / CSS
Canvas波浪花环的示例代码
2020/08/21 HTML / CSS
美国电子产品折扣网站:Daily Steals
2017/05/20 全球购物
国际书籍零售商:Wordery
2017/11/01 全球购物
中学劳技课教师的自我评价
2014/02/05 职场文书
关于学习的演讲稿
2014/05/10 职场文书
团队精神的演讲稿
2014/05/14 职场文书
公司晚会策划方案
2014/05/17 职场文书
先进个人事迹材料范文
2014/12/30 职场文书
导游词之秦皇岛燕塞湖
2020/01/03 职场文书
Golang数据类型和相互转换
2022/04/12 Golang