微信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, // 默认9
  sizeType: ['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: '', // 图片的localID
  success: 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();
			}
		})
	}
},

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

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

本次记录完事，拜拜