vue在图片上传的时候压缩图片


Posted in Vue.js onNovember 18, 2020

需求:

上传到服务器的图片太大会导致服务器承受不了,故在前端传图片的时候将图片压缩后再传到服务器

直接上代码

async getRealName(){

    let nickname = this.nickname.trim()

    let idnum = this.idnum.trim()

    let nameReg = /[\u4e00-\u9fa5]/gm

    let idnumReg = /^[a-z0-9]+$/i

    let zheng1 = document.getElementById("file1").files[0]

    let fan1 = document.getElementById("file2").files[0]

    if(nickname.length < 1) {

     return Toast('请输入姓名')

    }

    if(idnum.length < 1) {

     return Toast('请输入身份证号码')

    }

    if(!zheng1) {

     return Toast('请上传身份证信息页')

    }

    if(!fan1) {

     return Toast('请上传身份证国徽页')

    }

    if(zheng1.size/1024 > 1025) {

     this.imgCompress(zheng1,{quality:0.2},'zheng')

    }else {

     this.zheng = zheng1

    }

    if(fan1.size / 1024 > 1025) {

     this.imgCompress(fan1,{quality:0.2},'fan')



    }else {

     this.fan = fan1

    }

 

    setTimeout(()=>{

     let data = new FormData()

     data.append('nickname',nickname);//添加form表单中其他数据

     data.append('idnum',idnum)

     data.append('zheng',this.zheng,zheng1.name)

     data.append("fan",this.fan,fan1.name)

     let apiauth = localStorage.getItem('apiauth')

     let config = {

      headers:{'Content-Type':'multipart/form-data'},

      herders:{apiauth:apiauth}

     }

     axios.post("http://api139.ys11.ipfsico.com/index/index/realname",data,config).then((res)=>{

      Toast(res.data.msg)

      if(res.data.code == 1) {

       this.$router.replace({path:'/msite'})

      }

     })

    },1000)

 

 

   },

   //图片压缩

   imgCompress(path,obj,statu){

    let _this = this //这里的this 是把vue的实例对象指向改变为_this

    var img = new Image();

    if(statu == 'zheng') {

     img.src = _this.avatar1;

    }else {

     img.src = _this.avatar2

    }

    img.onload = function(){

     var that = this; //这里的this 是把img的对象指向改变为that 

     // 默认按比例压缩

     var w = that.width,

      h = that.height,

      scale = w / h;

     w = obj.width || w;

     h = obj.height || (w / scale);

     var quality = 0.7; // 默认图片质量为0.7

     //生成canvas

     var canvas = document.createElement('canvas');

     var ctx = canvas.getContext('2d');

     // 创建属性节点

     var anw = document.createAttribute("width");

     anw.nodeValue = w;

     var anh = document.createAttribute("height");

     anh.nodeValue = h;

     canvas.setAttributeNode(anw);

     canvas.setAttributeNode(anh);

     ctx.drawImage(that, 0, 0, w, h);

     // 图像质量

     if(obj.quality && obj.quality <= 1 && obj.quality > 0){

      quality = obj.quality;

     }

     // quality值越小,所绘制出的图像越模糊

     var base64 = canvas.toDataURL('image/jpeg', quality);

     // 回调函数返回base64的值

     var urlFile = _this.convertBase64UrlToBlob(base64) //这个地方的处理是为了把压缩的base64转化为对象,获得压缩后图片的大小size,方便对压缩后的图片再次进行判断;

     // console.log(urlFile)

     let file = _this.blobToFile(urlFile,path.name)

     console.log(file)

     if(statu == 'zheng') {

      _this.zheng = file

     }else {

      _this.fan = file

     }

 

     if(urlFile.size/1024 > 1025){

      Toast("图片过大,请重新上传图片")

     }

 

    }

 

   },

   convertBase64UrlToBlob(urlData){

    var arr = urlData.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 Blob([u8arr], {type:mime});

   },

   blobToFile(theBlob, fileName){

 

    theBlob.lastModifiedDate = new Date();

    theBlob.name = fileName;

    return theBlob;

   },

   changeImage(e) {

    console.log(e.target.files)

    if(e.target.files[0]){

     this.ownImg = false

     var file = e.target.files[0];

     console.log(file)

     let filemaxsize = 4096

     let size = file.size / 1024

     if (size > filemaxsize){

      Toast('您上传的图片过大,请重新选择')

      this.disabled = true;

      this.formatImg = false

      return false

     }

     var name = file.name

     var fileTypes = [".jpg", ".png"];

     if(name) {

      var isNext = false;

      var fileEnd = name.substring(name.indexOf("."));

      for (var i = 0; i < fileTypes.length; i++) {

       if (fileTypes[i] == fileEnd) {

        console.log(fileTypes[i])

        isNext = true;

        this.disabled = false;

        this.formatImg = true;

        break;

       }

      }

      if (!isNext){

       Toast('暂不支持该类型图片');

       name = "";

       this.disabled = true;

       this.formatImg = false

       return false;

      }

     }

     var reader = new FileReader()

     var that = this

     var image = new Image()

     reader.readAsDataURL(file)

     reader.onload = function(e) {

      that.avatar1 = this.result

     }

    }

   },

   changeImg(event){

    var file = event.target.files[0]

    var name = file.name

    var fileTypes = [".jpg", ".png"];

    if(name) {

     var isNext = false;

     var fileEnd = name.substring(name.indexOf("."));

     for (var i = 0; i < fileTypes.length; i++) {

      if (fileTypes[i] == fileEnd) {

       console.log(fileTypes[i])

       isNext = true;

       this.disabled = false;

       this.formatImg = true;

       break;

      }

     }

     if (!isNext){

      Toast('暂不支持该类型图片');

      name = "";

      this.disabled = true;

      this.formatImg = false

      return false;

     }

    }

    var reader = new FileReader()

    var that = this

    reader.readAsDataURL(file)

    reader.onload = function(event) {

     that.avatar2 = this.result

    }

   }

以上就是vue在图片上传的时候压缩图片的详细内容,更多关于vue 压缩图片的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
vue项目中企业微信使用js-sdk时config和agentConfig配置方式详解
Dec 15 Vue.js
Vue——解决报错 Computed property &quot;****&quot; was assigned to but it has no setter.
Dec 19 Vue.js
vue实现简易的双向数据绑定
Dec 29 Vue.js
Vue页面渲染中key的应用实例教程
Jan 12 Vue.js
聊聊vue 中的v-on参数问题
Jan 29 Vue.js
Vue项目打包部署到apache服务器的方法步骤
Feb 01 Vue.js
vue backtop组件的实现完整代码
Apr 07 Vue.js
关于Vue Router的10条高级技巧总结
May 06 Vue.js
vue如何批量引入组件、注册和使用详解
May 12 Vue.js
Vue中foreach数组与js中遍历数组的写法说明
Jun 05 Vue.js
vue+echarts实现多条折线图
Mar 21 Vue.js
Vue router配置与使用分析讲解
Dec 24 Vue.js
Vue +WebSocket + WaveSurferJS 实现H5聊天对话交互的实例
Nov 18 #Vue.js
springboot+vue实现文件上传下载
Nov 17 #Vue.js
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 #Vue.js
解决vue elementUI 使用el-select 时 change事件的触发问题
Nov 17 #Vue.js
Vue项目利用axios请求接口下载excel
Nov 17 #Vue.js
vue实现下载文件流完整前后端代码
Nov 17 #Vue.js
vue+iview实现文件上传
Nov 17 #Vue.js
You might like
PHP与SQL注入攻击[三]
2007/04/17 PHP
php 友好URL的实现(吐血推荐)
2008/10/04 PHP
PHP通过iconv将字符串从GBK转换为UTF8字符集
2011/07/18 PHP
PHP判断一个变量是否为整数、正整数的方法示例
2019/09/11 PHP
PHP7.0连接DB操作实例分析【基于mysqli】
2019/09/26 PHP
jQuery 遍历json数组的实现代码
2020/09/22 Javascript
javascript中match函数的用法小结
2014/02/08 Javascript
基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架
2014/09/26 NodeJs
jQuery选择器之基本选择器与层次选择器
2015/03/03 Javascript
js时钟翻牌效果实现代码分享
2020/07/31 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
JavaScript函数内部属性和函数方法实例详解
2016/03/17 Javascript
node.js实现登录注册页面
2017/04/08 Javascript
Bootstrap Table 搜索框和查询功能
2017/11/30 Javascript
详解npm 配置项registry修改为淘宝镜像
2018/09/07 Javascript
浅析Python 读取图像文件的性能对比
2019/03/07 Python
python获取点击的坐标画图形的方法
2019/07/09 Python
Pandas时间序列:时期(period)及其算术运算详解
2020/02/25 Python
python3.6使用SMTP协议发送邮件
2020/05/20 Python
如何利用Python给自己的头像加一个小国旗(小月饼)
2020/10/02 Python
阿迪达斯法国官方网站:adidas法国
2018/03/20 全球购物
含精油的天然有机化妆品:Indemne
2019/08/27 全球购物
意大利在线眼镜精品店:Ottica Lipari
2019/11/11 全球购物
有趣的睡衣和礼物:LazyOne
2019/11/27 全球购物
Java程序员面试题
2016/09/27 面试题
材料员岗位职责
2014/03/13 职场文书
关于成绩下滑的自我检讨书
2014/09/20 职场文书
立春观后感
2015/06/18 职场文书
团委副书记工作总结
2015/08/14 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
导游词之茶卡盐湖
2019/11/26 职场文书
使用react+redux实现计数器功能及遇到问题
2021/06/02 Javascript
PHP设计模式(观察者模式)
2021/07/07 PHP
Unicode中的CJK(中日韩统一表意文字)字符小结
2021/12/06 HTML / CSS
vue+iview实现手机号分段输入框
2022/03/25 Vue.js
Python利用Turtle绘制哆啦A梦和小猪佩奇
2022/04/04 Python