微信小程序 webview 中的h5 页面 van-uploader 部分机型无法上传 解决方案

 20220704更

jssdk chooseImage安卓手机无法唤起相机或相册？微信版本8.0.24 | 微信开放社区

调用chooseImage无法唤起相机或相册。经过多方测试，发现只有安卓微信8.0.24是这样。
 

微信官网解决方案：

请使用wx.chooseMedia(Object object)   wx.chooseMedia(Object object) | 微信开放文档

8.0.23版本更新后

小程序webview组件内嵌h5的时候上传文件调用出问题？ | 微信开放社区1.小程序webview组件使用vant ui上传方法是多文件上传图片时出现直接跳转到图片选择界面，没有跳转到文件选择界面2.因为直接跳转图片选择界面导致小程序多图片上传在部分安卓机上出现bug，文件上传无法再次调用的情况3.同样的操作同样的方法在微信内置浏览器打开链接时会弹出拍照和从相册选择的弹窗。4.请问小程序的webview组件方法是否在监听到了多图图片上传时直接执行了跳转方法，没有唤起弹窗，与小程序内核浏览器方法存在差异5.下图是微信内核浏览器调用多图上传时弹出的弹窗，但是在小程序的webview组件中没有弹出，并且直接跳转图片文件选择界面，导致部分安卓机型出现无法上传图片的情况https://developers.weixin.qq.com/community/develop/doc/0004e8f0368cf09c6bfd21f3556000

微信更新8.0.22版本后，在微信小程序 webview 中的h5 页面 van-uploader 部分机型无法正常上传，在非小程序打开无此类问题。

解决方案：

1、去除  multiple  可单张上传    缺点：不可多选
2、用jssdk的wx.chooseImage （注：企业微信不支持）缺点：h5页面要在微信打开，浏览器无法上传

wxConfig(result) {
  let _this = this;
  let timestamp = result.timestamp;
  let noncestr = result.nonceStr;
  let signature = result.signature;
  let appId = result.appId;
  wx.config({
    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    //                                debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: appId, // 必填，公众号的唯一标识
    timestamp: timestamp, // 必填，生成签名的时间戳
    nonceStr: noncestr, // 必填，生成签名的随机串
    signature: signature, // 必填，签名，见附录1
    jsApiList: [
      "chooseImage",
      "getLocalImgData",
    ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
  });
  wx.ready(function () {
    setSessionStorage('wxready', true);
    console.log("微信已加载完毕！");
  });
  wx.error(function (res) {
    
  });
}

使用修改代码量最少的方法

<van-uploader v-model="picture.other" @delete="deleteImg" :show-upload="false"
                accept="image/*">
</van-uploader>
<span class="imgUpload" @click="chooseImage">+</span>



chooseImage(index, type) {
      let _this = this;
      wx.chooseImage({
        count: 9, // 默认9
        sizeType: ['original',], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: function (res) {
          let localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
          _this.wxImgData(localIds, type)
        }
      });
    },


wxImgData(item, type) {
      let localId = item.pop();
      let _this = this;
      let params = new FormData();
      wx.getLocalImgData({
        localId: localId, // 图片的localID
        success: function (res) {
          let localData = res.localData; // localData是图片的base64数据，可以用img标签显示
          if (localData.indexOf('data:image') != 0) {
            //判断是否有这样的头部
            localData = 'data:image/jpeg;base64,' + localData;
          }
          localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg'); // 此处的localData 就是你所需要的base64位
          let file = _this.dataURLtoFile(localData);
          params.append("request", file);
           //接口上传
          upLoad(params).then(response => {
   
            if (response.code == '0') {
              Dialog.alert({
                title: '提示',
                message: response.message || '上传失败，请重新上传'
              });
            } else {
              if (item.length > 0) {
                //多张重复上传
                _this.wxImgData(item, type)
              } else {
               
              }
            }
          })
        }
      })
    },

 dataURLtoFile(dataurl, filename = 'weixin.jpg') {
      var arr = dataurl.split(','),
        //mime = arr[0].match(/:(.*?);/)[1],
        mime = "image/jpeg",
        bstr = atob(arr[1]),
        n = bstr.length,
        u8arr = new Uint8Array(n);
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
      }
      return new File([u8arr], filename, {type: mime});
    },




.imgUpload {
  font-size: 20px;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  box-sizing: border-box;
  width: 2.133333rem;
  height: 2.133333rem;
  margin: 0 .213333rem .213333rem 0;
  background-color: #f7f8fa;
}