尝试在null对象引用上调用接口方法java.lang.String com.facebook.react.bridge.ReadableMap等

时间:2018-06-11 23:48:56

标签: image firebase url react-native storage

将图片上传到firebase存储后,我收到此错误。我在用 "反应原生":" 0.55.4", " react-native-fetch-blob":" ^ 0.10.8", " react-native-image-picker":" ^ 0.26.10", " firebase":" ^ 5.0.4",

这是我上传图片的代码。

// Prepare Blob support
const Blob = RNFetchBlob.polyfill.Blob;

const fs = RNFetchBlob.fs;
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest;
window.Blob = Blob;

uploadImage = (uri, imageName, mime = "image/jpg") => {
    return new Promise((resolve, reject) => {
      const uploadUri =
        Platform.OS === "ios" ? uri.replace("file://", "") : uri;
      let uploadBlob = null;
      const imageRef = db
        .storage()
        .ref("images/")
        .child(imageName);

  fs.readFile(uploadUri, "base64")
    .then(data => {
      return Blob.build(data, { type: `${mime};BASE64` });
    })
    .then(blob => {
      uploadBlob = blob;
      alert("blob is " + JSON.stringify(blob));
      return imageRef.put(blob, { contentType: mime });
    })
    .then(() => {
      uploadBlob.close();
      return imageRef.getDownloadURL();
    })
    .then(url => {
      resolve(url);
    })
    .catch(error => {
      reject(error);
    });
});};

尝试调用接口方法' java.lang.String com.facebook.react.bridge.ReadableMap.getString(java.lang.String)'在null对象引用readAsText FileReaderModule.java:43调用Method.java调用JavaMethodWrapper.java:372调用JavaModuleWrapper.java:160运行NativeRunnable.java handleCallback Handler.java:790 dispatchMessage Handler.java:99 dispatchMessage MessageQueueThreadHandler.java:29循环Looper.java:164运行MessageQueueThreadImpl.java:192运行Thread.java:764

3 个答案:

答案 0 :(得分:2)

我遇到了同样的错误。解决方案是按照官方文档中的说明进行“获取替换”操作:

  

由于我们未实现FileReader polyfill,因此您可能会遇到   在某些情况下会出现此错误。

     

如果您在调试模式下使用Blob polyfill遇到此问题,请尝试   用获取替换替换window.fetch应该可以解决它。

并且:

  

如果您已有使用whatwg-fetch的代码,则现在没有了   要在0.9.0之后更改现有代码,只需使用提取替换。的   正式获取和替换获取之间的区别在于,   官方提取使用包装XMLHttpRequest的WHATWG-fetch js库   在后台进行polyfill,我们的实现就简单地完成了   RNFetchBlob.fetch。

基本上,您只需将其添加到代码中,位于window.Blob = Blob;行下方:

const Fetch = RNFetchBlob.polyfill.Fetch
// replace built-in fetch
window.fetch = new Fetch({
    // enable this option so that the response data conversion handled automatically
    auto : true,
    // when receiving response data, the module will match its Content-Type header
    // with strings in this array. If it contains any one of string in this array, 
    // the response body will be considered as binary data and the data will be stored
    // in file system instead of in memory.
    // By default, it only store response data to file system when Content-Type 
    // contains string `application/octet`.
    binaryContentTypes : [
        'image/',
        'video/',
        'audio/',
        'foo/',
    ]
}).build()

文档: https://github.com/wkh237/react-native-fetch-blob/wiki/Trouble-Shooting#failed-to-execute-readastext-on-filereader

答案 1 :(得分:0)

我遇到了同样的问题。它与预备陈述有关:

const Blob = RNFetchBlob.polyfill.Blob;
const fs = RNFetchBlob.fs;
window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest;
window.Blob = Blob;

如果我将它们评论出来,则不会发生错误。

答案 2 :(得分:0)

我已通过删除所有此程序包解决了此问题,因为即使我认为是由fetch替换触发,错误仍然出现 window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest; 所以我用了旧时尚

const uriToBlob = (uri) => {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.onload = function () {
            resolve(xhr.response);
        };

        xhr.onerror = function () {
            reject(new Error('uriToBlob failed'));
        };
        xhr.responseType = 'blob';
        xhr.open('GET', uri, true);

        xhr.send(null);
    });
}