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类的静态属性和实例属性的理解
Oct 01 Javascript
js浏览器本地存储store.js介绍及应用
May 13 Javascript
AngularJS基础学习笔记之控制器
May 10 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
Nov 09 Javascript
jQuery实现的纵向下拉菜单实例详解【附demo源码下载】
Jul 09 Javascript
JavaScript 冒泡排序和选择排序的实现代码
Sep 03 Javascript
详解Vue.js入门环境搭建
Mar 17 Javascript
单击按钮发送验证码,出现倒计时的简单实例
Mar 17 Javascript
ES6 对象的新功能与解构赋值介绍
Feb 05 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 Javascript
JavaScript交换变量的常用方法小结【4种方法】
May 07 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
php小技巧 把数组的键和值交换形成了新的数组,查找值取得键
2011/06/02 PHP
ucenter通信原理分析
2015/01/09 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
php实现复制移动文件的方法
2015/07/29 PHP
php实现倒计时效果
2015/12/19 PHP
laravel框架数据库操作、查询构建器、Eloquent ORM操作实例分析
2019/12/20 PHP
基于JQuery实现相同内容合并单元格的代码
2011/01/12 Javascript
ToolTips JQEURY插件之简洁小提示框效果
2011/11/19 Javascript
关于锚点跳转及jQuery下相关操作与插件
2012/10/01 Javascript
javascrpt绑定事件之匿名函数无法解除绑定问题
2012/12/06 Javascript
使用iojs的jsdom库实现同步系统时间
2015/04/20 Javascript
javascript中利用柯里化函数实现bind方法【推荐】
2016/04/29 Javascript
js获取新浪天气接口的实现代码
2016/06/06 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
利用JavaScript对中文(汉字)进行排序实例详解
2017/06/18 Javascript
ionic3实战教程之随机布局瀑布流的实现方法
2017/12/28 Javascript
代码实例ajax实现点击加载更多数据图片
2018/10/12 Javascript
Vuex的初探与实战小结
2018/11/26 Javascript
vue+iview/elementUi实现城市多选
2019/03/28 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
node.js 如何监视文件变化
2020/09/01 Javascript
[01:02:25]2014 DOTA2华西杯精英邀请赛 5 24 iG VS DK
2014/05/26 DOTA
Django 使用logging打印日志的实例
2018/04/28 Python
python3.5 email实现发送邮件功能
2018/05/22 Python
Python之——生成动态路由轨迹图的实例
2019/11/22 Python
使用pickle存储数据dump 和 load实例讲解
2019/12/30 Python
python误差棒图errorbar()函数实例解析
2020/02/11 Python
Python实现简单猜数字游戏
2021/02/03 Python
The Kooples美国官方网站:为情侣提供的法国当代时尚品牌
2019/01/03 全球购物
小区门卫工作职责
2013/12/14 职场文书
幼儿园标语大全
2014/06/19 职场文书
运动会广播稿150字(9篇)
2014/09/20 职场文书
大学生学期个人总结
2015/02/12 职场文书
地道战观后感500字
2015/06/04 职场文书
2016年中秋节晚会领导致辞
2015/11/26 职场文书