vue中实现图片压缩 file文件的方法


Posted in Javascript onMay 28, 2020

项目中遇到上传图片需要在前端进行图片压缩,将我的实现思路记录一下。(我已经拿到上传的file文件的前提下)

先创建一个公用的js,这里我的是api.js,里面封装一些常用的方法

vue中实现图片压缩 file文件的方法

将图片压缩的方法写到这个公用的js(api.js)中

//base64转码(压缩完成后的图片为base64编码,这个方法可以将base64编码转回file文件)
function dataURLtoFile(dataurl) {
  var arr = dataurl.split(','),
    mime = arr[0].match(/:(.*?);/)[1],
    bstr = atob(arr[1]),
    n = bstr.length,
    u8arr = new Uint8Array(n);
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }
  return new File([u8arr], { type: mime });

}
//压缩图片
function compressImg(file){
  var src;
  var files;
  var fileSize = parseFloat(parseInt(file['size'])/1024/1024).toFixed(2);
  var read = new FileReader();
  read.readAsDataURL(file);
  return new Promise(function(resolve, reject){
   read.onload = function (e) {
     var img = new Image();
     img.src = e.target.result;
     img.onload = function(){
       //默认按比例压缩
       var w = this.width,
         h = this.height;
       //生成canvas
       var canvas = document.createElement('canvas');
       var ctx = canvas.getContext('2d');
       var base64;
       // 创建属性节点
       canvas.setAttribute("width", w);
       canvas.setAttribute("height", h);
       ctx.drawImage(this, 0, 0, w, h);
       if(fileSize<1){
         //如果图片小于一兆 那么不执行压缩操作
         base64 = canvas.toDataURL(file['type'], 1);
       }else if(fileSize>1&&fileSize<2){
         //如果图片大于1M并且小于2M 那么压缩0.5
         base64 = canvas.toDataURL(file['type'], 0.5);
       }else{
         //如果图片超过2m 那么压缩0.2
         base64 = canvas.toDataURL(file['type'], 0.2);
       }
       // 回调函数返回file的值(将base64编码转成file)
       files = dataURLtoFile(base64); //如果后台接收类型为base64的话这一步可以省略
       
       resolve(files)
     };
   };
  })
};

//结尾处将该方法暴露出来供外部调用
export default {	
 compressImg,
}

在main.js中引入公用js(api.js)

import api from './http/api.js' //这里注意自己的路径
Vue.prototype.$api = api  //注册为全局变量

接下来在需要的地方调用我们的公用方法

this.$api.compressImg()//调用

我的调用方法
图片压缩的方法为异步执行 使用async await 解决异步问题(需要等压缩完成后)

//上传前压缩图片
   async beforeRead(file){//async await 解决异步问题,
    var formData = new FormData();//创建新的form
    if(file.length){   //file.length为真的时候说明是多图上传  要循环多图将file对象放进form中
     for(let i=0;i<file.length;i++){
      var f = await this.$api.compressImg(file[i]) //await只能放在async函数里 await会等待异步方法的返回值拿到以后在执行后面的方法
     formData.set('file'+i,f)
     }
    }else{
     let f = await this.$api.compressImg(file)
     formData.set('file0',f)
    }
   }

然后将formData传给后台,生成图片的线上地址就OK了!

总结

到此这篇关于vue中实现图片压缩 file文件的方法的文章就介绍到这了,更多相关vue图片压缩内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
取得窗口大小 兼容所有浏览器的js代码
Aug 09 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
Oct 29 Javascript
jQuery实现延迟跳转的方法
Jun 05 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
jQuery模拟物体自由落体运动(附演示与demo源码下载)
Jan 21 Javascript
移动端日期插件Mobiscroll.js使用详解
Dec 19 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
vue.js将unix时间戳转换为自定义时间格式
Jan 03 Javascript
jQuery实现左右滑动的toggle方法
Mar 03 jQuery
TypeScript中使用getElementXXX()的示例代码
Sep 12 Javascript
vscode 配置vue+vetur+eslint+prettier自动格式化功能
Mar 23 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
May 28 #Javascript
Vue实现附件上传功能
May 28 #Javascript
如何使用Javascript中的this关键字
May 28 #Javascript
简单了解JavaScript arguement原理及作用
May 28 #Javascript
如何使用JavaScript检测空闲的浏览器选项卡
May 28 #Javascript
js实现轮播图特效
May 28 #Javascript
JS写滑稽笑脸运动效果
May 28 #Javascript
You might like
codeigniter数据库操作函数汇总
2014/06/12 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
laravel-admin 实现在指定的相册下添加照片
2019/10/21 PHP
DHTML 中的绝对定位
2006/11/26 Javascript
拖拉表格的JS函数
2008/11/20 Javascript
js下利用控制器载入对应脚本
2010/07/17 Javascript
node.js中的http.get方法使用说明
2014/12/14 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
VUE2.0中Jsonp的使用方法
2018/05/22 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
TypeScript中使用getElementXXX()的示例代码
2019/09/12 Javascript
记一次用ts+vuecli4重构项目的实现
2020/05/21 Javascript
[03:02]安得倚天剑,跨海斩长鲸——中国军团出征DOTA2国际邀请赛
2018/08/14 DOTA
使用python脚本实现查询火车票工具
2018/07/19 Python
Python如何计算语句执行时间
2019/11/22 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
python使用scapy模块实现ARP扫描的过程
2021/01/21 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
意大利综合购物网站:Giordano Shop
2016/10/21 全球购物
乐高瑞士官方商店:LEGO CH
2020/08/16 全球购物
师范大学毕业自我鉴定
2013/11/21 职场文书
教师应聘个人求职信
2013/12/10 职场文书
如何客观的进行自我评价
2013/12/17 职场文书
经贸日语专业个人求职信范文
2013/12/28 职场文书
促销活动策划方案
2014/01/12 职场文书
收银出纳员岗位职责
2014/02/23 职场文书
远程网络教育毕业生自我鉴定
2014/04/14 职场文书
车辆工程专业求职信
2014/06/14 职场文书
辞职信格式模板
2015/02/27 职场文书
2015年教研员工作总结
2015/05/26 职场文书
记者节感言
2015/08/03 职场文书
原生CSS实现文字无限轮播的通用方法
2021/03/30 HTML / CSS
详解Vue router路由
2021/11/20 Vue.js
python数字类型和占位符详情
2022/03/13 Python
Java 深入探究讲解简单工厂模式
2022/04/07 Java/Android