vue中圖片上傳的時候壓縮圖片

參考文章：https://www.jianshu.com/p/7990362edcd3

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

直接上代碼

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) {
　　　　　　　　　　　　//如果超過1M就壓縮圖片
                    this.imgCompress(zheng1,{quality:0.2},'zheng')//這里的‘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)//第三個參數是將blob類型轉為file文件類型
                    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://api接口",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();
　　　　　　　　　　//一定要給img.src賦值成功，否則壓縮文件無效
                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
                }
            }

 

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

}

}