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

}

}