微信上传多张图片问题（兼容ios，安卓）

最新推荐文章于 2022-03-16 19:58:24 发布

wuwielk

最新推荐文章于 2022-03-16 19:58:24 发布

阅读量3.1k

点赞数

分类专栏：微信公众号开发文章标签：微信异步 ios 安卓图片上传

本文链接：https://blog.csdn.net/wuwielk/article/details/79444900

版权

微信公众号开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

做微信开发的时候，进行多张图片的上传，安卓会出现上传不完全的现象，是因为异步的问题，建议可以看一下js异步处理的方式。附代码

var ua = navigator.userAgent.toLowerCase();
if (ua.match(/iphone/i) == "micromessenger") {
    var ios = true;
} else {
    var ios = false;
}
wx.ready(function () { 
     wx.chooseImage({
        count: upload_imgs_num, // 默认9
        sizeType: ['compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function(res) {
            var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
            var uploadCount = 0;
            var localIdLength = parseInt(localIds.length);
            var now_img_num = $('#img_num').val();
            var totlal_img_num = parseInt(now_img_num) + localIdLength;
            upload_imgs_num -= localIdLength;
            var upload = function() {
                wx.uploadImage({
                    localId: '' + localIds[uploadCount],
                    isShowProgressTips: 1,
                    success: function(res) {
                        serverId = res.serverId;
                        var people_img = $("#people_img").val();
                        if(people_img != 0) { //这里是接收上传后的serverId  后台可以通过serverId从微信拉取图片
                            $("#people_img").val(people_img + ' ' + serverId);
                        } else {
                            $("#people_img").val(serverId);
                        }
                        if (ios || window.__wxjs_is_wkwebview) { //ios需要进一步处理
                            var localId = localIds[uploadCount];
                            wx.getLocalImgData({
                                localId: localId,
                                success: function (res) {
                                    var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
                                    localData = localData.replace('jgp', 'jpeg');  //serverId可以展示成图片
                                    var img = '<li><img src="' + localData + '" alt=""><span class="del" οnclick="del(this);"></span></li>'
                                    $('#test2').before(img);
                                },
                                fail: function (res) {
                                    alert('图片暂时无法查看，请重试');
                                }
                            })
                        } else { //安卓直接用localId展示
                            var img = '<li><img src="' + localIds[uploadCount] + '" alt=""><span class="del" οnclick="del(this);"></span></li>'
                            $('#test2').before(img);
                        }
                        if (uploadCount < localIdLength) {
                            uploadCount++;
                            return new Promise((resolve, reject) => { //解决异步问题
                                setTimeout(() => {
                                   upload();
                                  resolve()
                                }, 200)
                            })
                        }
                        $("#img_num").val(uploadCount);
                    },
                });
            }
            upload();
        }
    });
})