H5 图片压缩上传

H5活动已十分普遍，其中一种形式是让用户上传图片进行参与。移动端上传图片，用户一般都是上传手机相册中的图片，而现在手机的拍摄质量越来越高，一般单张照片的尺寸都在3M左右。若直接上传，十分耗流量，并且体验效果也不佳。因此需要在上传之前，先进行本地压缩。

接下来总结在h5活动的开发中图片压缩上传的功能，并标记其中踩过的几个坑，分享给大家：

---

小白区必看

对于移动端图片上传毫无概念的话，需要补充FileReader、Blob、FormData三个概念。

1.FileReader

定义

使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File对象或者Blob对象来指定所要处理的文件或数据.

方法

方法名	参数	描述
readAsBinaryString	file or blob	读取为原始二进制数据.
readAsDataURL	file or blob	读取为data: URL格式的字符串，若为图片，即Base64格式.
readAsText	file or blob，encoding	读取为文本，第二个参数文本的编码，默认UTF-8.
readAsArrayBuffer	file or blob	读取为ArrayBuffer对象.

事件处理程序

事件名	描述
onabort	读取操作中止时调用.
onerror	当读取操作发生错误时调用.
onload	当读取操作成功完成时调用.
onloadend	当读取操作完成时调用,不管是成功还是失败.该处理程序在onload或者onerror之后调用.
onloadstart	当读取操作将要开始之前调用.
onprogress	在读取数据过程中周期性调用.

使用

var fileReader = new FileReader();
fileReader.onload = function() {
   
    var url = this.result;
}
//or
fileReader.onload = function(e) {
   
    var url = e.target.result;
}

2.Blob

BLOB(binary large object)，二进制大对象，是一个可以存储二进制文件的容器。

3.FormData

利用FormData对象,你可以使用一系列的键值对来模拟一个完整的表单,然后使用XMLHttpRequest发送这个”表单”.

---

正题

移动端图片压缩上传过程：
1）input file上传图片，使用FileReader读取用户上传的图片；
2）图片数据传入img对象，将img绘制到canvas上，再使用canvas.toDataURL进行压缩；
3）获取压缩后的base64格式图片数据，转成二进制，塞入formdata，最后通过xmlHttpRequest提交formdata;

1.获取图片数据

fileEle.onchange = function() {
   
    if