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 相关文章推荐
element-plus一个vue3.xUI框架(element-ui的3.x 版初体验)
Dec 02 Vue.js
Vue实现点击当前行变色
Dec 14 Vue.js
Vue实现随机验证码功能
Dec 29 Vue.js
vue3自定义dialog、modal组件的方法
Jan 04 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
学习 Vue.js 遇到的那些坑
Feb 02 Vue.js
Vue包大小优化的实现(从1.72M到94K)
Feb 18 Vue.js
vue中axios封装使用的完整教程
Mar 03 Vue.js
vue 数据双向绑定的实现方法
Mar 04 Vue.js
vue使用localStorage持久性存储实现评论列表
Apr 14 Vue.js
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
vue递归实现树形组件
Jul 15 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
S900/ ETON E1-XM 收音机
2021/03/02 无线电
PHP文件上传原理简单分析
2011/05/29 PHP
基于php冒泡排序算法的深入理解
2013/06/09 PHP
ThinkPHP中自定义错误页面和提示页面实例
2014/11/22 PHP
php创建session的方法实例详解
2015/01/27 PHP
thinkPHP5实现数据库添加内容的方法
2017/10/25 PHP
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
javascript抖动元素的小例子
2013/10/28 Javascript
js 对小数加法精度处理示例说明
2013/12/27 Javascript
js读取被点击次数的简单实例(从数据库中读取)
2014/03/07 Javascript
jquery移除、绑定、触发元素事件使用示例详解
2014/04/10 Javascript
简单了解JavaScript操作XPath的一些基本方法
2016/06/03 Javascript
JavaScript事件学习小结(五)js中事件类型之鼠标事件
2016/06/09 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
AngularJS实现的简单拖拽功能示例
2018/01/02 Javascript
vue 不使用select实现下拉框功能(推荐)
2018/05/17 Javascript
vue父子组件间引用之$parent、$children
2020/05/20 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
2020/08/17 Javascript
vue点击按钮实现简单页面的切换
2020/09/08 Javascript
[46:27]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#2LGD VS MVP.Phx第一局
2016/03/02 DOTA
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
Python中实现两个字典(dict)合并的方法
2014/09/23 Python
django 使用 request 获取浏览器发送的参数示例代码
2018/06/11 Python
在pycharm中使用git版本管理以及同步github的方法
2019/01/16 Python
python创建n行m列数组示例
2019/12/02 Python
简单了解python调用其他脚本方法实例
2020/03/26 Python
HTML5中语义化 b 和 i 标签
2008/10/17 HTML / CSS
Interflora澳大利亚:同日鲜花速递
2019/06/25 全球购物
《埃及的金字塔》教学反思
2014/04/07 职场文书
事业单位年度考核评语
2014/12/31 职场文书
走近毛泽东观后感
2015/06/04 职场文书
百家讲坛观后感
2015/06/12 职场文书
争做文明公民倡议书
2019/06/24 职场文书
入伍志愿书怎么写?
2019/07/19 职场文书
PyTorch 实现L2正则化以及Dropout的操作
2021/05/27 Python
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL