微信公众号实现多图上传

• 需求：
  微信公众号上传多张图片并小图展示上传结果

• 实现步骤：

  1. 注入配置信息

   // 如果是html的静态页面在前端通过ajax将url传到后台签名
  function getWxSdkInfo(jsApiList) {
    var currentUrl = decodeURIComponent(location.href.split('#')[0]);
    $.ajax({
        type: "POST",
        url: "你获取注入信息的接口地址",
        data: {
            url: currentUrl
        },
        dataType: "json",
        success: function(data) {
            const res = data.jsinfo
            wx.config({
                debug: true,
                appId: res.appId,
                // 确认config中nonceStr（js中驼峰标准大写S）, timestamp与用以签名中的对应noncestr, timestamp一致
                timestamp: res.timestamp,
                nonceStr: res.noncestr,
                signature: res.signature,
                jsApiList: jsApiList
            });
        }
    })
  }
  getWxSdkInfo(["chooseImage", "uploadImage", 'getLocalImgData'])
  

  2. 调用上传方法

     1. 注意：
        1. uploadImage怎么传多图？（目前只支持一次上传一张，多张图片需等前一张图片上传之后再调用该接口）
        2. 没法对本地选择的图片进行预览（chooseImage接口本身就支持预览，不需要额外支持）
        3. wx.chooseImage获取到的图片为一个临时路径，微信提供了wx.getLocalImgData方法可以把获取到的路径转为base64格式的数据,但转换后的base64在android和iOS中稍有不同
        4. 获取到图片的base64数据之后其实就足够了，可以直接将base64数据传到自己的服务器。
     2. 实现（chooseImage、uploadImage、getLocalImgData）

     async function chooseAndUpload(count) {
        return new Promise((resolve, reject) => {
            let images = []
            wx.chooseImage({
                count: count, // 默认9
                sizeType: ['original', 'compressed'],
                sourceType: ['album', 'camera'],
                success: function(res) {
                    let localIds = res.localIds; // 返回选定照片的本地ID列表
                    let localIdLength = localIds.length; //本地ID列表的长度
                    let uploadCount = 0 // 已上传图片数量
                    const upload = function() {
                        wx.uploadImage({
                            localId: localIds[uploadCount], // 需要上传的图片的本地ID
                            isShowProgressTips: 1, // 默认为1，显示进度提示
                            success: function(res) {
                                images.push({
                                    serverId:res.serverId,
                                    localId:localIds[uploadCount]
                                }); 
                                // 此接口仅在 iOS WKWebview 下提供，用于兼容 iOS WKWebview 不支持 localId 直接显示图片的问题
                                wx.getLocalImgData({
                                    localId: localIds[uploadCount], 
                                    success: function(res) {
                                        const localData = res.localData
                                        let imageBase64 = '';
                                        if (localData.indexOf('data:image') == 0) {
                                        //苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接
                                            imageBase64 = localData;
                                        } else {
                                            //此处是安卓的大坑！在拼接前需要对localData进行换行符的全局替换
                                            imageBase64 = 'data:image/jpeg;base64,' + localData.replace(/\n/g, '');
                                        }
                                        images[uploadCount].localData = imageBase64
                                        uploadCount++;
                                        if (uploadCount < localIdLength) {
                                            upload();
                                        } else {
                                            // console.log(images)
                                            resolve(images)
                                        }
                                    }
                                });
                            }
                        });
                    }
                    upload()
                }
            })
        })
     }
     // 至此：你获得了上传每张图片的 本地地址 上传到微信云端的线上地址与该图片的base64位的数据 根据你的业务需求尽情享用吧！！！
     let imagesList = await chooseAndUpload(count)