react-native-fetch-blob блокирует вызовы firebase и реагирует на родное приложение

У меня есть собственное приложение для реагирования, которое использует Firebase, firestore. для загрузки изображений я использую «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)
        })
};

react-native firebase blob image-upload react-native-fetch-blob
person amos    schedule 11.01.2018    source источник

Ответы (2)


arrow_upward
6
arrow_downward

У меня была такая же проблема, я сделал кое-какой трюк, чтобы решить эту проблему. Это может быть не самое правильное решение, но оно сработало для меня.

Хитрость заключается в том, чтобы оставить 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)
        })
};
person Dhiraj    schedule 08.04.2018
comment
Пожалуйста, @chris. Но я бы посоветовал вам использовать react-native-firebase, который является более простым и лучшим способом для реагирования на нативное приложение. - person Dhiraj; 03.06.2019

arrow_upward
-1
arrow_downward

это просто, вы можете попробовать это, чтобы загрузить изображение

<i>
getSelectedImages = (selectedImages, currentImage)=>{
    const image = this.state.uri
    let uploadBlob = null
    let 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(image, 'base64')
      .then((data) => {
        return Blob.build(data, { type: `${mime};BASE64` })
    })
    .then((blob) => {
        uploadBlob = blob
        return imageRef.put(blob, { contentType: mime })
      })
      .then(() => {
        uploadBlob.close()
        window.XMLHttpRequest = originalXMLHttpRequest ;
        window.Blob = originalBlob
        return imageRef.getDownloadURL()
      })
      .then((url) => {
        firebase.database().ref('groub').child(params.chat).child('message').push({
          createdAt:firebase.database.ServerValue.TIMESTAMP,
          image:url,
          user:{
            _id:params.id,
            name:params.name,
          },
        })
        alert('Upload Sukses') 
      })
      .catch((error) => {
        console.log(error);
      })  
 
  }

</i>

person hilyathul wahid    schedule 16.10.2018