移动端图片上传的两种方式

前段时间一直在做公司的项目，开发中遇到了图片上传的功能，由于是第一次调用微信接口实现多图上传，处处是坑啊，现总结一下开发中的问题，分享出来，以便后续有类似功能时直接查看使用，不必两眼一抹黑的开发了。
一 基于微信提供的API开发多图上传
（1） 微信js-sdk有两种，我们在开发中需要搞清楚自己到底是调用哪个平台的接口，两种sdk大同小异
一种是我们平时使用的js-sdk(微信JS-SDK说明文档:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115)
另一种就是企业号开发的sdk
(企业号开发者中心：http://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3#.E5.9B.BE.E5.83.8F.E6.8E.A5.E5.8F.A3)
（2）配置相关
在我们使用sdk前，需要在后台配置我们项目打包上线后需要用的可信域名（即：JS接口安全域名），配置该域名时会随机生成一个txt文件，我们需要将该文件放置在网站的根目录下并且确保能访问，否则的话我们是调用不了各接口的，接下来就是根据官方文档提供的步骤配置config。
config接口注入权限验证配置中的签名串（signature）需要注意的是url参数，在安卓手机上该参数是当前页面的URL地址，但是在ios上，是用进入页的url去参与签名，所以会一直报签名失败，对于单页应用的Vue来说，我们需要再调用各接口的时候先刷新下页面获取到正确的URL后再去做签名算法，这是我们在开发中需要多加注意的。
（3）图片上传操作
1 调用拍照或从手机相册中选图接口
wx.chooseImage({
count: 1, // 默认9
sizeType: [‘original’, ‘compressed’], // 可以指定是原图还是压缩图，默认二者都有
sourceType: [‘album’, ‘camera’], // 可以指定来源是相册还是相机，默认二者都有
success: function (res) {
var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
}
});
2 上传图片接口
wx.uploadImage({
localId: ”, // 需要上传的图片的本地ID，由chooseImage接口获得
isShowProgressTips: 1, // 默认为1，显示进度提示
success: function (res) {
var serverId = res.serverId; // 返回图片的服务器端ID，这是微信服务器的图片ID
// 调用自己的接口实现上传数据
}
});
备注：上传图片有效期3天，可用微信多媒体接口下载图片到自己的服务器，此处获得的 serverId 即 media_id。
虽然我们选择了多张图片，但是在上传的时候微信不支持把所选图片一次性上传，所以最终还是得一张一张上传，因此需要一个递归函数去多次执行
3 将上传的图片从微信服务器下载到自己的服务器上，这里需要使用素材管理中的获取临时素材接口
http请求方式: GET,https调用
https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID
企业号开发该接口地址：
https://qyapi.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID
这里的操作需要在后端实现，该接口返回的是一个供下载的图像流，我们可以请求该地址，将返回内容直接写入本地服务器就是一个图片，然后可以返回一个供前端使用的图片地址，前端就可以展示了。但是这样又增加了一次请求，体验性不是很好。

改进方法：既然图片是从本地获取到的，我们可以考虑直接使用上述1中返回的localIds展示本地图片，对于增加、删除操作，我们只需要将服务器返回地址与localIds相关联就可以解决，这样的话减少了http请求并且能够快速显示出所选图片来，何乐而不为呢。

到这以为图像的上传跟展示已经完事了，但是。。。，可怕的但是出现了

在ios下，localIds无法作为img的src显示，需要调用专门为iOS准备的获取本地图片接口（wx.getLocalImgData）
wx.getLocalImgData({
localId: ”, // 图片的localID
success: function (res) {
var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
}
});
此处的localId是一个图片的id，不可把localIds一次传入，所以还是需要自己写个递归函数多次调用

到此，基于微信的多图上传告一段落

二 使用megapix-image 实现移动端图片上传

该插件原理是使用Canvas压缩图片上传，使用该插件的大体思路是
1 页面初始化一个input标签跟一个img标签，input标签用来获取选择的图片资源，其内容存放在document.getElementById(‘inputid‘).files[0]中,img标签用来展示选择的图片的base64码
2 构造一个MegaPixImage函数
eg: mpImg = new MegaPixImage(file);,file即为document.getElementById(‘inputid‘).files[0]
MegaPixImage有一个render方法，该方法接受几个参数，第一个参数：img标签，第二个参数是一个对象：可以设置图像的大小跟压缩比{maxHeight: 500，maxWidth: 500, quality: 0.6}, 第三个参数是回调函数，回调函数默认参数是图片的base64码

例：
var fileInput = document.getElementById(‘cameraInput‘);
var file = fileInput.files[0];
var mpImg = new MegaPixImage(file);

        var resCanvas1 = document.getElementById(‘myCanvas‘);
        var _max = 320;
        mpImg.render(resCanvas1, {
            maxHeight: _max
        },callback);

callback中便可以写自己的业务逻辑代码。
3 服务端处理
服务端获取到base64 码，将以 “data:image/png;base64,”开头的字符串截取后的剩余字符串写入文件，即是一张可打开的图片，然后返回前端成功标志，前端便可以按照约定好的路径格式读取文件了