美文网首页
公众号开发,微信开发者工具上传图片正常,真机显示permissi

公众号开发,微信开发者工具上传图片正常,真机显示permissi

作者: 花影_62b4 | 来源:发表于2021-07-26 09:04 被阅读0次

未配置wx.config引起,配置上了就正常显示了

//获取微信配置信息config
getWxConfig = () => {
  this.props.dispatch({
    type: 'wxConfig/getWxConfig',
    payload: encodeURIComponent(location.href.split('#')[0]),
    callback: response => {
      //通过config接口注入权限验证配置     
      wx.config({
        //debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
        appId: response.appId, // 必填,公众号的唯一标识
        timestamp: response.timestamp, // 必填,生成签名的时间戳
        nonceStr: response.nonceStr, // 必填,生成签名的随机串
        signature: response.signature, // 必填,签名
        jsApiList: ['chooseImage', 'previewImage'], // 必填,需要使用的JS接口列表
      });     
    },
  });
};
componentDidMount() {
  this.getWxConfig ()
}

  //上传图片
  imagesUpload = () => {
    
    let arrayImg = [...this.state.questionPictures];
    let self = this;   
    if (arrayImg.length >= 5) {
      Toast.info('最多只能添加5张图片', 1);
      return false;
    } 
  

    wx.chooseImage({
      count: 5 - arrayImg.length, // 默认9
      sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有, 'compressed'
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
      success: res => {       
        var localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
        console.log(localIds.length)
        if (localIds.length > 0) {
          if (localIds.length <= 5 && localIds.length + arrayImg.length > 5) {
            Toast.info('总共最多支持5张照片', 1);
            return false;
          }
          for (var i = 0; i < localIds.length; i++) {
            wx.getLocalImgData({
              localId: localIds[i], // 图片的localID
              success: res => {
                var 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');
                
                //调用上传获取上传图片的url
                let formData = new FormData();

                if (
                  this.dataUrlToFile(localData, 'documents' + new Date().getTime() + '.jpg').size /
                    1024 >
                  5000
                ) {
                  Toast.info('图片需小于5M', 1);
                  return false;
                }
                
                formData.append(
                  'file',
                  this.dataUrlToFile(localData, 'documents' + new Date().getTime() + '.jpg')
                );
                console.log(formData)
                $.ajax({
                  url: API.BASEAPI + 'documentInvestigation/uploadImage.do',
                  type: 'POST',
                  contentType: false,
                  processData: false,
                  data: formData,
                  async: false,
                  mineType: 'multipart/form-data',
                  dataType: 'json',
                  xhrFields: {
                    withCredentials: true,
                  },
                  success: response => {
                    console.log(response);
                    if (response.status == 'S' && response.data) {
                      let list = [...self.state.questionPictures]
                      list.push(response.data[0].imageUrl);
                      console.log(list)
                      self.setState({
                        questionPictures: list,
                      });
                    }
                  },
                  error: function(e) {
                    console.log(e);
                  },
                });
              },
            });
          }
        }
      },
      // fail:function(err) {
      //   alert(JSON.stringify(err))      
      // }
    });
  };
  dataUrlToFile = (dataurl, filename) => {
    let arr = dataurl.split(','),
      mine = arr[0].match(/:(.*?);/)[1],
      bstr = atob(arr[1]),
      n = bstr.length,
      u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new File([u8arr], filename, { type: mine });
  };

相关文章

网友评论

      本文标题:公众号开发,微信开发者工具上传图片正常,真机显示permissi

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