vue项目中的h5图片上传（处理上传的时候图片被旋转的问题，并压缩图片大小）

vue的图片上传

这个页面实现的主要是实现创建球队功能，里面包含队徽，球队类型，球队名称，所属地址
这里除了图片上传还有一个地址的三级联动功能，这里我把这个页面都贴上来了。这个项目中使用vux作为ui库——本文主要是项目的纪录。
本项目除了图片的上传还有选取图片后图片被旋转的问题主要用到 exif-js 插件 （可以使用npm安装 npm install exif-js --save ）具体方法可以查看其文档

**备注：这里是我们调用接口写的共用部分，每个人做项目肯定不一样。**
	var _this = this;
    var timeStamp = new Date().getTime();
    var randomKey = Math.random();
    var sign = getSign('1.0.0',timeStamp,randomKey,{},md5); 
    
    this.axios({
      method: '这里是调用接口的方法',  // 比如get 、post
      url: `这里存放其对类型接口地址`,
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',  // 请求类型
        'X-Request-AppType': 'public',
        'X-Request-Id': 've.shareh5',
        'X-Request-AppVersion': '1.0.0',
        'X-Request-Time': timeStamp,
        'X-Request-Nonce': randomKey,
        'X-Request-Sign': sign,
        'X-Request-Token':localStorage.token  //项目中的token值
      }
    })
    .then(function (res) {
      
    })

图片上传js代码

//获取图片文件
handleFile(e) {
     let files = e.target.files || e.dataTransfer.files;  
     if (!files.length) return;
     this.avator = e.target.files[0];
     this.imgPreview(this.avator);  
   },

	/**
	* 将以base64的图片url数据转换为Blob
	* @param urlData 图片base64数据
	* @name convertBase64UrlToBlob
	*/
   convertBase64UrlToBlob(urlData) {
     var bytes=window.atob(urlData.split(',')[1]);
     //处理异常,将ascii码小于0的转换为大于0
     var ab = new ArrayBuffer(bytes.length);
     var ia = new Uint8Array(ab);
     for (var i = 0; i < bytes.length; i++) {
       ia[i] = bytes.charCodeAt(i);
     }
     return new Blob( [ab] , {type : 'image/*'});
   },

   imgPreview(file){ //base64 格式
     let that = this;
     let Orientation;
     // //去获取拍照时的信息，解决拍出来的照片旋转问题 
     Exif.getData(file, function(){
         Orientation = Exif.getTag(this, 'Orientation');
     });

     // 看支持不支持FileReader  
     if (!file || !window.FileReader) return;
     if(/^image/.test(file.type)){
       // 创建一个reader  
       let reader = new FileReader();
       // 将上传的图片将转成 base64 格式  
       reader.readAsDataURL(file);
       // 读取成功后的回调
       reader.onload = function(e) {
         let img = new Image();
         img.src = this.result;
         //判断图片是否大于100K,是就直接上传，反之压缩图片  
         if (this.result.length <= (100 * 1024)) {  
           // that.$vux.toast.text("图片不能超过2M");
           that.avatorImg =this.result;
         }else {  
           img.onload = function () {  
             let data = that.compress(img,Orientation);
             that.avatorImg = data;
           }
         }
       }
     }
   },
   rotateImg (img, direction,canvas) {  
     //最小与最大旋转方向，图片旋转4次后回到原方向      
     const min_step = 0;      
     const max_step = 3;        
     if (img == null)return;      
     //img的高度和宽度不能在img元素隐藏后获取，否则会出错      
     let height = img.height;      
     let width = img.width;        
     let step = 2;      
     if (step == null) {      
       step = min_step;      
     }      
     if (direction == 'right') {      
       step++;      
       //旋转到原位置，即超过最大值      
       step > max_step && (step = min_step);      
     } else {      
       step--;      
       step < min_step && (step = max_step);      
     }       
     //旋转角度以弧度值为参数      
     let degree = step * 90 * Math.PI / 180;      
     let ctx = canvas.getContext('2d');      
     switch (step) {      
       case 0:      
         canvas.width = width;      
         canvas.height = height;      
         ctx.drawImage(img, 0, 0);      
         break;      
       case 1:      
         canvas.width = height;      
         canvas.height = width;      
         ctx.rotate(degree);      
         ctx.drawImage(img, 0, -height);      
         break;
       case 2:      
         canvas.width = width;      
         canvas.height = height;      
         ctx.rotate(degree);      
         ctx.drawImage(img, -width, -height);      
         break;
       case 3:      
         canvas.width = height;      
         canvas.height = width;      
         ctx.rotate(degree);      
         ctx.drawImage(img, -width, 0);      
         break;  
     }      
   },

   compress(img,Orientation) {  
     let canvas = document.createElement("canvas");  
     let ctx = canvas.getContext('2d');  
     //瓦片canvas  
     let tCanvas = document.createElement("canvas");  
     let tctx = tCanvas.getContext("2d");  
     let initSize = img.src.length;  
     let width = img.width;  
     let height = img.height;  
     //如果图片大于四百万像素，计算压缩比并将大小压至400万以下  
     let ratio;  
     if ((ratio = width * height / 4000000) > 1) {  
       // console.log("大于400万像素")  
       ratio = Math.sqrt(ratio);  
       width /= ratio;  
       height /= ratio;  
     } else {  
       ratio = 1;  
     }  
     canvas.width = width;  
     canvas.height = height;  
     //        铺底色  
     ctx.fillStyle = "#fff";  
     ctx.fillRect(0, 0, canvas.width, canvas.height);
     //如果图片像素大于100万则使用瓦片绘制  
     let count;  
     if ((count = width * height / 1000000) > 1) {  
       // console.log("超过100W像素");  
       count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片  
       //            计算每块瓦片的宽和高  
       let nw = ~~(width / count);
       let nh = ~~(height / count);
       tCanvas.width = nw;
       tCanvas.height = nh;
       for (let i = 0; i < count; i++) {
         for (let j = 0; j < count; j++) {
           tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);  
           ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);  
         }
       }
     } else {
       ctx.drawImage(img, 0, 0, width, height);
     }
     //修复ios上传图片的时候 被旋转的问题  
     if(Orientation != "" && Orientation != 1){
       switch(Orientation){  
         case 6://需要顺时针（向左）90度旋转
           this.rotateImg(img,'left',canvas);
           break;  
         case 8://需要逆时针（向右）90度旋转  
           this.rotateImg(img,'right',canvas);
           break;  
         case 3://需要180度旋转  
           this.rotateImg(img,'right',canvas);//转两次
           this.rotateImg(img,'right',canvas);  
           break;  
       }
     }
     //进行最小压缩  
     let ndata = canvas.toDataURL('image/jpeg', 0.1);  
     // let ndata = canvas;
     // console.log('压缩前：' + initSize);  
     // console.log('压缩后：