react native fetch blob正在阻止firebase调用n react native app

我有一个使用Firebase、firestore的react本机应用程序。 对于上传图像，我使用“react native fetch blob”创建一个blob

在我用来上传文件的js文件中，我的代码如下所示：

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

**

window.XMLHttpRequest=RNFetchBlob.polyfill.XMLHttpRequest

**

由于这个window.XMLHttpRequest我的应用程序被阻止，并且没有从firebase获得任何响应（没有捕获/什么都没有=>只是传递代码）

如果我删除这一行，我可以读/写firestore，但我不能上传图像

我能做些什么来上传图片并继续给firestore写信吗

这是我的主页：

import ImagePicker from 'react-native-image-crop-picker';
import RNFetchBlob from 'react-native-fetch-blob'
import firebase from 'firebase';

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

export const choozFile = (isSmalImg) => {
    let options = {
        width: isSmalImg ? 100 : 690,
        height: isSmalImg ? 100 : 390,
        cropping: true,
        mediaType: 'photo'
    };
    return new Promise((resolve, reject) => {
        ImagePicker.openPicker(options).then(response => {
            let source = { uri: response.path };
            resolve({ avatarSource: source, isProfileImg: isSmalImg })
        })
    });
}

export const addReportToFirebase = (obj = {}, uri, isProfile, mime = 'application/octet-stream') => {
    obj["uId"] = "JtXNfy34BNRfCoRO6luwhIJke0l2";
    const storage = firebase.storage();
    const db = firebase.firestore();
    const uploadUri = uri;
    const sessionId = new Date().getTime();
    let uploadBlob = null;

    const imageRef = storage.ref(`images${isProfile ? '/profile' : ''}`).child(`${sessionId}`)

    fs.readFile(uploadUri, 'base64')
        .then((data) => {
            return Blob.build(data, { type: `${mime};BASE64` })
        })
        .then((blob) => {
            uploadBlob = blob
            return imageRef.put(blob, { contentType: mime })
        })
        .then(() => {
            uploadBlob.close()
             imageRef.getDownloadURL().then((url)=>{
                obj['image'] = url;
                db.collection("reports").add(obj).then(() => {
                    console.log("Document successfully written!");
                }).catch((err) => {
                    console.error("Error writing document: ", err);                    
                });
            })
        })
        .catch((error) => {
            console.log('upload Image error: ', error)
        })
};

---

我也有同样的问题，我做了一些技巧来解决这个问题。这可能不是最正确的解决方案，但对我来说很有效

诀窍是将

RNFetchBlob.polyfill.XMLHttpRequest

保留在

window.XMLHttpRequest

中，仅用于上载操作。将图像上载到存储器后，将

window.XMLHttpRequest

还原为原始值

您的代码将如下所示

    import ImagePicker from 'react-native-image-crop-picker';
import RNFetchBlob from 'react-native-fetch-blob'
import firebase from 'firebase';

const Blob = RNFetchBlob.polyfill.Blob
const fs = RNFetchBlob.fs

window.Blob = Blob

export const choozFile = (isSmalImg) => {
    let options = {
        width: isSmalImg ? 100 : 690,
        height: isSmalImg ? 100 : 390,
        cropping: true,
        mediaType: 'photo'
    };
    return new Promise((resolve, reject) => {
        ImagePicker.openPicker(options).then(response => {
            let source = { uri: response.path };
            resolve({ avatarSource: source, isProfileImg: isSmalImg })
        })
    });
}

export const addReportToFirebase = (obj = {}, uri, isProfile, mime = 'application/octet-stream') => {
    obj["uId"] = "JtXNfy34BNRfCoRO6luwhIJke0l2";
    const storage = firebase.storage();
    const db = firebase.firestore();
    const uploadUri = uri;
    const sessionId = new Date().getTime();
    let uploadBlob = null;

    //keep reference to original value
    const originalXMLHttpRequest = window.XMLHttpRequest;

 window.XMLHttpRequest = RNFetchBlob.polyfill.XMLHttpRequest
    const imageRef = storage.ref(`images${isProfile ? '/profile' : ''}`).child(`${sessionId}`)

    fs.readFile(uploadUri, 'base64')
        .then((data) => {
            return Blob.build(data, { type: `${mime};BASE64` })
        })
        .then((blob) => {
            uploadBlob = blob
            return imageRef.put(blob, { contentType: mime })
        })
        .then(() => {
            uploadBlob.close();

            //revert value to original
            window.XMLHttpRequest = originalXMLHttpRequest ;
             imageRef.getDownloadURL().then((url)=>{
                obj['image'] = url;
                db.collection("reports").add(obj).then(() => {
                    console.log("Document successfully written!");
                }).catch((err) => {
                    console.error("Error writing document: ", err);                    
                });
            })
        })
        .catch((error) => {
            console.log('upload Image error: ', error)
        })
};

---

简单的说，你可以试着上传图片

getSelectedImages=（selectedImages，currentImage）=>{
const image=this.state.uri
让uploadBlob=null
让mime='image/jpg'
const originalXMLHttpRequest=window.XMLHttpRequest；
const originalBlob=window.Blob；
window.XMLHttpRequest=RNFetchBlob.polyfill.XMLHttpRequest
window.Blob=RNFetchBlob.polyfill.Blob
const imageRef=firebase.storage（）.ref（'posts'）.child（this.state.uri）
RNFetchBlob.fs.readFile（图像“base64”）
。然后（（数据）=>{
返回Blob.build（数据，{type:`${mime}；BASE64`}）
})
.然后（（blob）=>{
uploadBlob=blob
返回imageRef.put（blob，{contentType:mime}）
})
.然后（（）=>{
uploadBlob.close（）文件
window.XMLHttpRequest=原始XMLHttpRequest；
window.Blob=原始Blob
返回imageRef.getDownloadURL（）
})
。然后（（url）=>{
firebase.database（）.ref（'groub'）.child（params.chat）.child（'message'）.push({
createdAt:firebase.database.ServerValue.TIMESTAMP，
图片：url，
用户：{
_id:params.id，
名称：params.name，
},
})
警报（'Upload Sukses'）
})
.catch（（错误）=>{
console.log（错误）；
})  
}

欢迎您@chris。但我建议您使用react native firebase，这是react native应用程序更简单、最好的方式。