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 相关文章推荐
JavaScript 调试器简介
Feb 21 Javascript
js触发select onchange事件的小技巧
Aug 05 Javascript
JavaScript使用指针操作实现约瑟夫问题实例
Apr 07 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
Aug 13 Javascript
Bootstrap CSS组件之分页(pagination)和翻页(pager)
Dec 17 Javascript
Vue.js实现按钮的动态绑定效果及实现代码
Aug 21 Javascript
关于Vue单页面骨架屏实践记录
Dec 13 Javascript
vue项目webpack中Npm传递参数配置不同域名接口
Jun 15 Javascript
layui上传图片到服务器的非项目目录下的方法
Sep 26 Javascript
python虚拟环境 virtualenv的简单使用
Jan 21 Javascript
react如何快速设置文件路径别名
Apr 28 Javascript
angular4实现带搜索的下拉框
Mar 25 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 $_ENV为空的原因分析
2009/06/01 PHP
采用ThinkPHP中F方法实现快速缓存实例
2014/06/13 PHP
php自定义加密与解密程序实例
2014/12/31 PHP
PHP生成图片验证码功能示例
2017/01/12 PHP
IFrame跨域高度自适应实现代码
2012/08/16 Javascript
extjs 如何给column 加上提示
2014/07/29 Javascript
JS实用的动画弹出层效果实例
2015/05/05 Javascript
jQuery+CSS3实现仿花瓣网固定顶部位置带悬浮效果的导航菜单
2016/09/21 Javascript
详解前端自动化工具gulp自动添加版本号
2016/12/20 Javascript
windows系统下更新nodejs版本的方案
2017/11/24 NodeJs
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
Node.js系列之发起get/post请求(2)
2019/08/30 Javascript
javascript实现左右缓动动画函数
2020/11/25 Javascript
Python模块学习 re 正则表达式
2011/05/19 Python
Linux下使用python自动修改本机网关代码分享
2015/05/21 Python
Python实现求最大公约数及判断素数的方法
2015/05/26 Python
Python中特殊函数集锦
2015/07/27 Python
python结合API实现即时天气信息
2016/01/19 Python
python装饰器代替set get方法实例
2019/12/19 Python
Python chardet库识别编码原理解析
2020/02/18 Python
Django实现随机图形验证码的示例
2020/10/15 Python
python利用opencv保存、播放视频
2020/11/02 Python
HTML5新增的标签和属性归纳总结
2018/05/02 HTML / CSS
HTML5+CSS设置浮动却没有动反而在中间且错行的问题
2020/05/26 HTML / CSS
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
美国手机支架公司:PopSockets
2019/11/27 全球购物
Net Remoting把服务器端激活两种模式
2014/01/22 面试题
面向对象设计的原则是什么
2013/02/13 面试题
个人融资协议书范本两则
2014/10/15 职场文书
民主评议党员工作总结
2014/10/20 职场文书
初中教师德育工作总结2015
2015/05/12 职场文书
幽灵公主观后感
2015/06/09 职场文书
2016年优秀班主任先进事迹材料
2016/02/26 职场文书
小学四年级作文之最感动的一件事
2019/11/01 职场文书
shell进度条追踪指令执行时间的场景分析
2022/06/16 Servers