今天就跟大家聊聊有關利用vue如何實現一個將圖片壓縮并上傳功能，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。

十年專注成都網站制作，成都定制網頁設計，個人網站制作服務，為大家分享網站制作知識、方案，網站設計流程、步驟,成功服務上千家企業。為您提供網站建設,網站制作,網頁設計及定制高端網站建設服務,專注于成都定制網頁設計,高端網頁制作,對白烏魚等多個方面，擁有豐富的網站設計經驗。

上傳到服務器的圖片太大會導致服務器承受不了，故在前端傳圖片的時候將圖片壓縮后再傳到服務器

直接上代碼

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("/tupian/20230522/domain_profile.cfm

      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(/:(.*&#63;);/)[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如何實現一個將圖片壓縮并上傳功能-創新互聯
URL鏈接：http://m.newbst.com/article2/dgjsic.html

成都網站建設公司_創新互聯，為您提供關鍵詞優化、虛擬主機、網頁設計公司、Google、網站設計公司、外貿建站

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯