美文网首页
微信jdk wx.getLocalImgData 遇到的坑

微信jdk wx.getLocalImgData 遇到的坑

作者: waiterYu | 来源:发表于2020-12-07 14:04 被阅读0次

最近写的一个公众号项目中遇到一个功能,用到了微信的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);
          }
        });
      });
    }

相关文章

  • 微信jdk wx.getLocalImgData 遇到的坑

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

  • 微信分享

    微信公众平台绑定域名 遇到的坑 遇到的问题,微信API的附录里面都有。 这里的坑: 虽然调用了微信分享,但是并不意...

  • 微信支付相关问题解决网址

    ios微信支付开发遇到的问题 微信支付趟过的坑

  • 使用微信小程序官方提供的解密demo里的php文件一定要做的一件

    今天遇到了一个天坑,我这么相信微信,结果被微信偷偷坑死了一回。 微信小程序解密encryptedData数据字符串...

  • 微信录音遇到的坑

    模拟微信长按录音 第一次调用录音功能时,会弹框权限询问,所以要在长按之前先把alert干掉

  • 集成微信遇到的坑

    前言(废话): 大家的项目里现在大多数都集成的都有微信的SDK,要么是微信的登录,要么是微信的支付,毕竟微信如此普...

  • 微信集成遇到的坑

    这个问题我也遇到过,分享给大家! 微信支付如果遇到跳转只有一个确定请看这里 今天在联调微信支付,不得不说,和它比起...

  • 微信支付遇到的坑

    自己容易埋下的坑 1、订单创建成功但支付失败,再次调用订单进行支付又能成功支付失败报缺少appid 这里的微信报...

  • [总结] 微信开发遇到的坑

    本文总结在微信开发过程中遇到的各种坑。 微信支付:chooseWXPay:fail, the permission...

  • vue 微信登录遇到的坑

    微信登录官方文档:https://open.weixin.qq.com/cgi-bin/showdocument?...

网友评论

      本文标题:微信jdk wx.getLocalImgData 遇到的坑

      本文链接:https://www.haomeiwen.com/subject/hfttgktx.html