React H5图片压缩上传

目录

第一步：获取file文件

第二步：将获取的文件进行base64编码

第三步：利用canvas压缩图片

第四步：将压缩后的base64编码图片转为File类型

第五步：利用FormData上传

---

 

第一步：获取file文件

默认已获取到用户选择的图片File，请参考其他资料。

File文件内容参考如下图，如果你拿到这样的数据，这一步就完成了。

第二步：将获取的文件进行base64编码

如下图 imgBase64就是base64编码之后的图片，这里注意this指向问题

getBase64Image(file:any){
    let reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = ()=>{
      let imgBase64 =  reader.result;
           
    }
}

第三步：利用canvas压缩图片

此方法我写在了另一个文件里，然后导入进行调用，回调函数里包含了压缩后的base64文件

//图片压缩
  /**
  * 图片压缩（利用canvas）
  * @param  path     base64图片
  * @param  obj      压缩配置quality，不传则按比例压缩，默认0.5
  * @param  callback  回调函数
  */
 export const dealImageCompression = (path, obj,callback)  =>{
  let img = new Image();
  img.src = path;

  img.onload = function () {
    let that = this;
    // 默认按比例压缩
    let w = img.width,
      h = img.height,
      scale = w / h;
    
    // 默认图片质量为0.5
    let quality = 0.5;
    if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
      quality = obj.quality;
    }

    w = w>300 ? w*quality : w;
    h = w>300 ?  w / scale : h;
    
    //生成canvas
    let canvas = document.createElement('canvas'),
      ctx = canvas.getContext('2d');
    canvas.width = w;
    canvas.height = h;
    ctx.drawImage(img, 0, 0, w, h);

    // 回调函数返回base64的值
    var base64 = canvas.toDataURL('image/jpeg', quality);
    debugger;
    callback(base64);
  }
}

 

第四步：将压缩后的base64编码图片转为File类型

由于上传是使用file方式，所以压缩后需要再将base64编码图片转为file文件

File继承于Blob，扩展了一些属性（文件名、修改时间、路径等）。正常场景下，使用Bolb对象就可以。因为少了几个数据，如文件名name，所以第五步需要把name拼接上。

如下图，返回的即为file文件。

export const  dataURItoBlob = (dataurl) =>{   //dataurl是base64格式
  var arr = dataurl.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});
};

 

第五步：利用FormData上传

注意，下图中的参数，file为原始的file，newfile是第四步压缩后的file，然后就可以进行相关网络请求上传了。

const formData = new FormData();
formData.append("uploadFile", newfile,file.name);