web移动端图片压缩上传

前段时间接到一个项目,需要实现图片压缩上传功能,翻阅资料终于实现了,在这里把代码分享出来,希望能帮助大家,该项目是vue项目 图片上传用的是formdata

	html部分
	<input type="file" @change="uploadFiles($event,3)" accept="image/*" id="personalAccreditPath">
   js方法
        //生成FileReader
        photoCompress(file,obj,callback){
            var self=this;
            var ready=new FileReader();
            /*开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/
            ready.readAsDataURL(file);
            ready.function(){
                self.precent=2;//百分比显示加载框
                var path=this.result;//path
                self.canvasDataURL(path,obj,callback)
            }
        },
        //canvas图片压缩
        canvasDataURL(path, obj, callback){
            var  self=this;
            var img = new Image();//生成img对象
            img.src = path;
            img.onload = function(){
                self.precent=10;//百分比显示加载框
                var that = this;
                // 默认按比例压缩
                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的值
                callback(base64);
            }
        },
        //压缩上传 
        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});
        },
        //上传图片
        uploadFiles(e,index){
            var self=this;
            self.progress_bar_state=true; //加载进度条显示 
            var file=e.target.files[0];  //获得文件对象
            var formdata = new FormData(); // FormData 对象
            if(file.size/1024 > 1025) { //大于1M，进行压缩上传
                self.photoCompress(file, {quality: 0.2}, function(base64Codes){
                    //console.log("压缩后：" + base.length / 1024 + " " + base);
                    var bl = self.convertBase64UrlToBlob(base64Codes);
                    formdata.append("file", bl, "file_"+Date.parse(new Date())+".jpg"); // 文件对象
                    self.upimg(formdata,index);
                });
            }else{ //小于等于1M 原图上传
                formdata.append("file", file, "file_"+Date.parse(new Date())+".jpg"); // 文件对象    添加formdata
                self.upimg(formdata,index);
            }
        },
        //图片上传
        upimg(formdata,index){
            var self=this;
            self.$axios({
                method:'post',
                url:self.URLS.uploadImg,
                data:formdata,
                headers: {
                  'Content-Type': 'multipart/form-data'
                },
                onUploadProgress:function(progressEvent){
                    if(progressEvent.lengthComputable){
                        self.changeNumber(progressEvent)
                    }
                }
            }).then(
                (res)=> {
                    self.progress_bar_state=false;
                    self.precent=0;//百分比显示加载框
                    self.$layer.msg("图片上传成功!");
                    if(index==1){//营业执照
                        self.signData.licensePath=res.data;
                    }else if(index==2){//身份证正面
                        self.signData.headerIdPath=res.data;
                    }else if(index==3){//企业征信授权书路径  
                        self.signData.personalAccreditPath=res.data;
                    }else if(index==4){//其他路径
                        self.signData.otherPath=res.data;
                    }
                }
            ).catch(
                ()=>{
                    self.progress_bar_state=false;
                    self.precent=0;
                    self.$layer.closeAll();
                    self.$layer.msg("图片上传失败");
                }
            )
        },