H5手机端 实现多图上传的功能 但是实际上 安卓手机上只能义词上传一张图片(测试的机型:小米)代码如下:

在微信开发中遇见一个问题 应用上传插件安卓手机无法进行多张上传

当时现象:

微信浏览器选择安卓手机图库点击一张没有选择完成就自动关闭图库,在ios上没有问题,

经过多方面查找原因,之后总结:

原因:安卓微信浏览器无法支持input multiple的h5属性

后来只能通过微信的 js-sdk的方法进行上传

原理:通过微信js-sdk先把图片上传到微信服务器临时素材,之后通过回调函数得到media_id,后端通过media_id在微信接口把图片下载到服务器。

页面中嵌入

<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" type="text/javascript">

之后js中进行配置

wx.config({
debug: false,//是否开启调试模式
appId: "{$sign.appId}",//
timestamp: {$sign.timestamp},
nonceStr: '{$sign.nonceStr}',
signature: '{$sign.signature}',
jsApiList: [
// 所有要调用的 API 都要加到这个列表中
'checkJsApi','chooseImage', 'previewImage', 'uploadImage', 'downloadImage','onMenuShareTimeline','chooseWXPay','getLocalImgData'
]
});
wx.ready(function () {
// 在这里调用 API
var images = {
localId: [],
serverId: []
};
var i=0;
document.querySelector('#chooseImage').onclick = function() {
if($(".uimg").length>0){
var thatcount=9-$(".uimg").length;
}else{
var thatcount=9;
}
wx.chooseImage({//选择图片
count:thatcount,//限制上传图片的张数
success: function(res) {
images.localId = res.localIds;
var str="";
var i = 0, length =images.localId.length;
images.serverId = [];
upload();
function upload() {
wx.uploadImage({//上传图片
localId: images.localId[i],
isShowProgressTips:0,
success: function(res) {

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐