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 相关文章推荐
juqery 学习之五 文档处理 包裹、替换、删除、复制
Feb 11 Javascript
JavaScript prototype属性深入介绍
Nov 27 Javascript
jQuery里filter()函数与find()函数用法分析
Jun 24 Javascript
JS实现的添加弹出层并完成锁屏操作示例
Apr 07 Javascript
react-router中的属性详解
Jun 01 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
BootStrap实现文件上传并带有进度条效果
Sep 11 Javascript
Vuejs实现购物车功能
Nov 05 Javascript
JavaScript实现元素滚动条到达一定位置循环追加内容
Dec 28 Javascript
详解小程序开发经验:多页面数据同步
May 18 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
Vue通过getAction的finally来最大程度避免影响主数据呈现问题
Apr 24 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
乐信RP2100的电路分析和打磨
2021/03/02 无线电
PHP实现的封装验证码类详解
2013/06/18 PHP
php获取网页中图片、DIV内容的简单方法
2014/06/19 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
图片连续滚动代码[兼容IE/firefox]
2009/06/11 Javascript
jquery1.4后 jqDrag 拖动 不可用
2010/02/06 Javascript
一个页面元素appendchild追加到另一个页面元素的问题
2013/01/27 Javascript
js将json格式内容转换成对象的方法
2013/11/01 Javascript
jQuery之Deferred对象详解
2014/09/04 Javascript
AngularJS基础学习笔记之简单介绍
2015/05/10 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
jQuery基于扩展简单实现倒计时功能的方法
2016/05/14 Javascript
利用Jquery队列实现根据输入数量显示的动画
2016/09/01 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
2017/04/20 jQuery
angular.js + require.js构建模块化单页面应用的方法步骤
2017/07/19 Javascript
webpack 2.x配置reactjs基本开发环境详解
2017/08/08 Javascript
angular项目中bootstrap-datetimepicker时间插件的使用示例
2018/03/15 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
vue+axios 拦截器实现统一token的案例
2020/09/11 Javascript
python与C互相调用的方法详解
2017/07/14 Python
python编写弹球游戏的实现代码
2018/03/12 Python
利用python修改json文件的value方法
2018/12/31 Python
Python3.5 Pandas模块之DataFrame用法实例分析
2019/04/23 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
使用python socket分发大文件的实现方法
2019/07/08 Python
Python引入多个模块及包的概念过程解析
2020/09/21 Python
利用HTML5 Canvas API绘制矩形的超级攻略
2016/03/21 HTML / CSS
欧洲著名的珠宝和手表网上商城:uhrcenter
2017/04/10 全球购物
餐饮业会计岗位职责
2013/12/19 职场文书
医药销售求职信范文
2014/02/01 职场文书
教师个人鉴定材料
2014/02/08 职场文书
总经理的岗位职责
2014/02/23 职场文书
入党自我鉴定
2014/03/25 职场文书
本科毕业生应聘求职信
2014/07/06 职场文书
Spring Boot mybatis-config 和 log4j 输出sql 日志的方式
2021/07/26 Java/Android
详细聊聊关于Mysql联合查询的那些事儿
2021/10/24 MySQL