uni.chooseImage这个api利用的浏览器本身的能力,基于浏览器本身的规范。在微信浏览器内经常会出现无法选择图片的情况,并且对于多图选择支持很不友好。
对于H5开发很多情况都是在公众号这个场景,因此我们可以利用jssdk里的chooseImage能力来进行实现。
基础设施参考了 这篇文章 谢谢作者的支持。
首要要在jsApiList选项中补充“chooseImage”和“getLocalImgData”。
其余的直接贴代码
chooseImage: async function(data) {
if (!this.isWechat()) {
return;
}
if (!data)
data = {};
if (!data.count)
data.count = 9;
if (!data.sizeType)
data.sizeType = ['original', 'compressed'];
if (!data.sourceType)
data.sourceType = ['album', 'camera'];
var that = this;
return new Promise((resolve, reject) => {
jweixin.chooseImage({
count: data.count,
sizeType: data.sizeType,
sourceType: data.sourceType,
success: async function(res) {
var localDatas = await that.handlerLoacalImgData(res.localIds);
resolve(localDatas)
}
})
})
},
handlerLoacalImgData: async function(localIds) {
var localDatas = new Array();
for (let index in localIds) {
var item = localIds[index];
var localData = await this.getLocalImgData(item);
localDatas.push(localData);
}
return localDatas;
},
getLocalImgData: function(item) {
var isIOS = uni.getSystemInfoSync().platform == 'ios';
return new Promise((resolve, reject) => {
jweixin.getLocalImgData({
localId: item,
success: function(res) {
var localData = res.localData;
if (localData.indexOf("base64,") > -1) {
localData = localData.substr(localData.indexOf("base64,") + "base64,".length);
}
if (isIOS) {
resolve({
localData: localData,
src: res.localData
})
} else {
resolve({
localData: localData,
src: item
})
}
}
})
})
}
localData字段为base64上传的值,src为image显示的值。
localData在Ios和安卓上有不同的处理,具体原因参见 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#17
在上传的时候目前我没有想到可以直传阿里云OSS的方法 因此先用base64绕到服务端再上传到OSS。
如需前端压缩,可自行接入相关插件。提供一个自己在用的 https://github.com/brunobar79/J-I-C/
以上。
0 个评论
要回复文章请先登录或注册