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 相关文章推荐
一步一步教你写一个jQuery的插件教程(Plugin)
Sep 03 Javascript
学习从实践开始之jQuery插件开发 对话框插件开发
Apr 26 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
Mar 25 Javascript
jquery监听div内容的变化具体实现思路
Nov 04 Javascript
javascript基于DOM实现权限选择实例分析
May 14 Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 Javascript
JQuery Ajax 异步操作之动态添加节点功能
May 24 jQuery
jquery的 filter()方法使用教程
Mar 22 jQuery
使用layui前端框架弹出form表单以及提交的示例
Oct 25 Javascript
Vue.js使用axios动态获取response里的data数据操作
Sep 08 Javascript
Vue 数据绑定的原理分析
Nov 16 Javascript
js不常见操作运算符总结
Nov 20 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.MVC的模板标签系统(四)
2006/09/05 PHP
PHP采集相关教程之一 CURL函数库
2010/02/15 PHP
ubuntu下编译安装xcache for php5.3 的具体操作步骤
2013/06/18 PHP
PHP使用CURL_MULTI实现多线程采集的例子
2014/07/29 PHP
PHP中使用php://input处理相同name值的表单数据
2015/02/03 PHP
用PHP生成excel文件到指定目录
2015/06/22 PHP
jQuery常见开发技巧详细整理
2013/01/02 Javascript
js工具方法弹出蒙版
2013/05/08 Javascript
iframe子页面与父页面在同域或不同域下的js通信
2014/05/07 Javascript
jQuery的text()方法用法分析
2014/12/20 Javascript
js实现文字跟随鼠标移动而移动的方法
2015/02/28 Javascript
Javascript之BOM(window对象)详解
2016/05/25 Javascript
AngularJS 遇到的小坑与技巧小结
2016/06/07 Javascript
ECMAScript6轮播图实践知识总结
2016/08/17 Javascript
JavaScript中浅讲ajax图文详解
2016/11/11 Javascript
Node.js中路径处理模块path详解
2016/11/14 Javascript
使用ionic切换页面卡顿的解决方法
2016/12/16 Javascript
一文快速详解前端框架 Vue 最强大的功能
2019/05/21 Javascript
微信小程序canvas截取任意形状的实现代码
2020/01/13 Javascript
0基础学习前端开发的一些建议
2020/07/14 Javascript
Python 列表理解及使用方法
2017/10/27 Python
Python实现PS图像明亮度调整效果示例
2018/01/23 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
python pandas 对series和dataframe的重置索引reindex方法
2018/06/07 Python
Anaconda2 5.2.0安装使用图文教程
2018/09/19 Python
手把手教你如何安装Pycharm(详细图文教程)
2018/11/28 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
实例详解python函数的对象、函数嵌套、名称空间和作用域
2019/05/31 Python
关于Tensorflow使用CPU报错的解决方式
2020/02/05 Python
python3 使用openpyxl将mysql数据写入xlsx的操作
2020/05/15 Python
财产公证书格式
2014/04/10 职场文书
设备售后服务承诺书
2014/05/30 职场文书
数学教育专业求职信
2014/07/22 职场文书
公司市场部岗位职责
2015/04/15 职场文书
幼儿园教师师德师风承诺书
2015/04/28 职场文书
【海涛教你打DOTA】虚空假面第一视角骨弓3房29杀
2022/04/01 DOTA