我有一个使用 Firebase、firestore 的 React Native 应用程序。 为了上传图像,我使用“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)
})
};
关于firebase - react-native-fetch-blob 正在阻止 React Native 应用程序中的 Firebase 调用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48215067/