微信H5公众号chooseImg上传图片

公司公众号项目，之前是使用Vant框架构建。一期的时候上传图片使用Vant提供的Uploader组件，当时没有提到要为客户提供多图上传这个功能，且测试的小姐姐当初的iphone很给力，几乎没什么问题。

一期上线，二期优化来了。重点是要提供多图上传，奔溃的是ios端Uploader组件还是一如既往的很给力，然到了安卓手机上，完全不起作用。尝试了网友说得将multiple 放到末尾并且赋值，但是并不能唤起安卓的多图选择。

<van-uploader :before-read="beforeRead" :after-read="afterRead" :before-delete="deletImg":max-count="maxSize" v-model="fileList" multiple ><van-icon name="plus" />
</van-uploader>
设置成
<van-uploader :before-read="beforeRead" :after-read="afterRead" :before-delete="deletImg":max-count="maxSize" v-model="fileList" :multiple="true"><van-icon name="plus" />
</van-uploader>

此时才发现 Vant官网Uploader的坑（部分安卓不支持，笑哭~），希望下个版本可以支持

只能改组件了，此时想到了微信原生的chooseImage

微信针对图片封装了一系列的方法chooseImage、previewImage、uploadImage、downloadImage、getLocalImgData，微信开发文档链接：微信上传文档

//拍照或从手机相册中选图接口
wx.chooseImage({count: 1, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片}
});//预览图片
wx.previewImage({current: '', // 当前显示图片的http链接urls: [] // 需要预览的图片http链接列表
});//图片上传，上传到微信的服务器
wx.uploadImage({localId: '', // 需要上传的图片的本地ID，由chooseImage接口获得isShowProgressTips: 1, // 默认为1，显示进度提示success: function (res) {var serverId = res.serverId; // 返回图片的服务器端ID}
})//下载图片
wx.downloadImage({serverId: '', // 需要下载的图片的服务器端ID，由uploadImage接口获得isShowProgressTips: 1, // 默认为1，显示进度提示success: function (res) {var localId = res.localId; // 返回图片下载后的本地ID}
});//获取本地图片
wx.getLocalImgData({localId: '', // 图片的localIDsuccess: function (res) {var localData = res.localData; // localData是图片的base64数据，可以用img标签显示}
});

1、我将用到的微信上传方法封装成为一个文件，在开发中首先要引入微信的JSSDK文件，然后注册所需要的jsApi。注册时要调用后端的接口生成签名数据

init(params,number,callback){let config = null;getWxSign(params).then(res =>{if(res.code == 200){config = wxSign({ticket:res.content.ticket,appId:res.content.appid})wx.config({debug: false, // 开启调试模式appId: config.appId, //公众号的唯一标识timestamp: config.timestamp, //生成签名的时间戳nonceStr: config.nonceStr, //生成签名的随机串signature: config.signature, //签名jsApiList: ['chooseImage','uploadImage', 'downloadImage','getLocalImgData'], // 使用的JS接口列表});wx.ready(function(){wxUpload.chooseImage(number, callback);})}}).catch(error => {Toast(error);})
},

2、然后调用微信选择照片的方法，唤起微信拍照(从相册选取)功能

chooseImage(number, callback){wx.checkJsApi({jsApiList: ['chooseImage'],success: function(res) {if(res.checkResult.chooseImage){wx.chooseImage({count: number,sizeType: ['original', 'compressed'], //是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], //来源是相册还是相机，默认二者都有success: function(res){Toast.loading({message: "加载中...",duration: 0,forbidClick: true})wxUpload.readImage(res.localIds, callback) //选定照片的本地ID列表},fail: function(error){Toast.clear();}})}}})
},

3、获取上传图片本地列表，imageData就是你最后从微信拿到的图片数据

readImage(localIds, callback){const imageData = []for(let i=0; i< localIds.length; i++){wx.getLocalImgData({localId: localIds[i].toString(),success(res) {const localData = res.localData;let imageBase64 = '';if (localData.indexOf('data:image') == 0) {//ios直接赋值imageBase64 = localData;}else{//安卓在拼接前要进行换行符的全局替换imageBase64 = 'data:image/jpeg;base64,' + localData.replace(/\n/g, '');}let fileData = wxUpload.dataURLtoFile(imageBase64);imageData.push(fileData)if(i == localIds.length-1){callback && callback(imageData)}},fail(res){Toast.clear();}})}
},

整体功能并没有多复杂，只是调试的时候挺费劲。必须传到服务器上才可看到效果。希望各位分享下本地如何调试类似的功能

我将完整的微信封装上传功能上传到我的资源服务器，大家有需要可以下载

本次记录完事，拜拜