wap手机端实现上传图片流程

实现图片上传使用了WeUI uploader插件

WeUI：是一套同微信原生视觉体验一致的基础样式库，为微信Web开发量身设计

流程：图片上传用到了FileReader，FormData，用这两个基本能实现图片的预览和上传，实现图片压缩需要借助canvas。

（1）使用input file上传图片，用filereader读取用户上传的图片数据

（2）把图片数据传入img对象，然后将img绘制到canvas上，再调用canvas.toDataURL对图片进行压缩

（3）获取到压缩后的base64格式图片数据，转成blob（blob，二进制大对象，是一个可以存储二进制文件的容器）塞入formdata，再通过ajax提交formdata。

大致思路是（代码实现）：

第一步：添加uploader.vue组件

uploader.vue示例代码

multiple：上传图片可多选

依据接口，需要添加请求头：enctype ="multipart/form-data"

第二步：上传图片前要先在前端做下限制，如果不合规则，提示相关信息

定义图片的类型、大小及上传数量，picsUrl存放图片数组，不符合规则的图片提示相关信息

第三步：将input中选择的图片地址通过FileReader获取后赋给新建的图片对象，然后将图片对象放到canvas画布上

先获取图片数据，也就是监听input file的change事件，然后获取到上传的文件对象files，将类数组的files转成数组，然后进行for循环遍历

通过FileReader获取后赋给新建的图片对象，然后将图片对象放到canvas画布上

var fd = new FormData(); //用来存放上传数据

var img = new Image(); //创建图像对象

var reader = new FileReader();//读取用户上传的图片数据

fd.append('files',blob); //追加上传数据

根据image对象获取图片的width、height，创建画布将图片的宽高对应的赋值给画布

注：canvas将图片画到画布上的时候需要确定canvas的尺寸，同时设定好drawImage的参数

依次对应：ctx.drawImage(img,dx,dy,w,h)

dx：原图像的左上角在目标canvas上x轴的位置

dy：原图像的左上角在目标canvas上y轴的位置

w：在目标canvas上绘制图像的宽度。允许对绘制的图像进行缩放（如不处理，绘制图片时宽度不会缩放）

h：在目标canvas上绘制图像的高度。允许对绘制的图像进行缩放（如不处理，绘制图片时高度不会缩放）

注：为了上传完整的图片，dx,dy需要设置为0，w和h需要设置为原始图片的宽度和高度。我们要等image对象下载完毕后获取其原始尺寸

var base64 = canvas.toDataURL('image/png'); //进行图片压缩

压缩图片并不是直接把图片绘制到canvas再调用一下toDataURL就可以

在IOS中，canvas绘制图片有两个限制：

(1)  图片的大小，图片超过200w像素，图片无法绘制到canvas上，调用drawImage的时候不会报错，用toDataURL获取图片数据的时候获取到的是空数据

(2)  canvas的大小有限制，canvas的大小大于约500w像素（宽高乘积）时，图片画不出来，其他东西也画不出来

处理方法：

针对问题一：可以采取瓦片绘制。将图片分割成多块绘到canvas上；

针对问题二：可以对图片宽高进行压缩

第四步：图片上传

使用ajax，提交方式使用post

crossDomain:true //使用post提交时会连带提交cookie

var blob = base64ToBlob(base64); //将base64转为blob，使用base64提交时数据较大

数据上传进度使用的模拟进度，间隔0.03s执行一次。这样就实现了图片的压缩和上传。

图片上传效果见示例：http://www.qdfuns.com/notes/18123/7110b12b485098aab5dfc2c59760688c.html

还可扫描二维码：