微信jdk wx.getLocalImgData 遇到的坑

最近写的一个公众号项目中遇到一个功能,用到了微信的api 调用相册选择图片,上传回显,之前的写法如下

wx.chooseImage({
    count: 5, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
    success: function(res) {
      console.log(res);
      const localIds = res.localIds
      console.log(that.imgArray, 88);
      // wkwebview的情况下需要使用getLocalImgData
      for (let i = 0; i < localIds.length; i++) {
        console.log(1, 2);
        wx.getLocalImgData({
          localId: localIds[i],
          success: (res2) => {
            let localData = res2.localData // localData是图片的base64数据,可以用img标签显示
            // localData = localData.replace('jgp', 'jpeg') // iOS 系统里面得到的数据,类型为 image/jgp,因此需要替换一下
            // console.log(localData)

            if (localData.indexOf('data:image') == 0) {
              that.imgArray.push(localData);
              that.imageBlob.push(localData);

            } else {
              that.imgArray.push("data:image/jpeg;base64," + localData.replace(/\n/g, ""));
              that.imageBlob.push("data:image/jpeg;base64," + localData.replace(/\n/g, ""));
            }
            // that.handlingImg -= 1;
            console.log(that.imgArray, 99);
          }
        })
      }
    }
  })

经过测试之后发现,上传一张图片没问题,选择多张的时候,getLocalImgData在循环中未执行回调方法,改了多次才发现,循环中只会执行一次,改成promise 执行,完美解决

wx.chooseImage({
    count: 5, // 默认9
    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
    success: function(res) {
      console.log(res);
      const localIds = res.localIds
      that.readImages(localIds);
      console.log(that.imgArray, 88);
    }
  }),
  async readImages(localIds) {
      console.log(localIds.length, '长度');
      for (let i = 0; i < localIds.length; i++) {
        console.log('循环' + i + 1);
        await this.doreadImage(localIds[i]);
      }
    },
    doreadImage(item) {
      let that = this;
      return new Promise(resolve => {
        wx.getLocalImgData({
          localId: item,
          success: function(res2) {
            let localData = res2.localData // localData是图片的base64数据,可以用img标签显示
            if (localData.indexOf('data:image') == 0) {
              that.imgArray.push(localData);
              that.imageBlob.push(localData);
            } else {
              that.imgArray.push("data:image/jpeg;base64," + localData.replace(/\n/g, ""));
              that.imageBlob.push("data:image/jpeg;base64," + localData.replace(/\n/g, ""));
            }
            resolve()
            // that.handlingImg -= 1;
            console.log(that.imgArray, 99);
          },
          fail: function(err) {
            window.console.error(err);
          }
        });
      });
    }
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 久违的晴天,家长会。 家长大会开好到教室时,离放学已经没多少时间了。班主任说已经安排了三个家长分享经验。 放学铃声...
    飘雪儿5阅读 7,887评论 16 22
  • 今天感恩节哎,感谢一直在我身边的亲朋好友。感恩相遇!感恩不离不弃。 中午开了第一次的党会,身份的转变要...
    余生动听阅读 10,941评论 0 11
  • 可爱进取,孤独成精。努力飞翔,天堂翱翔。战争美好,孤独进取。胆大飞翔,成就辉煌。努力进取,遥望,和谐家园。可爱游走...
    赵原野阅读 3,557评论 1 1
  • 在妖界我有个名头叫胡百晓,无论是何事,只要找到胡百晓即可有解决的办法。因为是只狐狸大家以讹传讹叫我“倾城百晓”,...
    猫九0110阅读 3,745评论 7 3

友情链接更多精彩内容