将相机拍摄的图像上传到 React Native 上的 firebase 存储
Upload image taken with camera to firebase storage on React Native
我只想将使用 react-native-camera 拍摄的照片上传到带有 react-native-fetch-blob 的 firebase 存储,但无论我做什么都不会发生。
我已经查看了我能找到的所有文档,但似乎没有任何效果。
如果有人有完成此任务的工作系统,请post将其作为答案。我可以获得 react-native-camera returns 的 jpg 的 uri(它显示在 ImageView 和所有内容中),但是我的上传功能似乎在放置 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 = firebase.storage().ref('selfies').child(imageName)
console.log("uploadUri",uploadUri)
fs.readFile(uploadUri, 'base64').then((data) => {
console.log("MADE DATA")
var blobEvent = new Blob(data, 'image/jpg;base64')
var blob = null
blobEvent.onCreated(genBlob => {
console.log("CREATED BLOB EVENT")
blob = genBlob
firebase.storage().ref('selfies').child(imageName).put(blob).then(function(snapshot) {
console.log('Uploaded a blob or file!');
firebase.database().ref("selfies/" + firebase.auth().currentUser.uid).set(0)
var updates = {};
updates["/users/" + firebase.auth().currentUser.uid + "/signup/"] = 1;
firebase.database().ref().update(updates);
});
}, (error) => {
console.log('Upload Error: ' + error)
alert(error)
}, () => {
console.log('Completed upload: ' + uploadTask.snapshot.downloadURL)
})
})
}).catch((error) => {
alert(error)
})
}
我希望尽可能高效,所以如果它更快并且占用更少的内存而不将其更改为 base64,那么我更喜欢它。现在我只是不知道如何进行这项工作。
这一直是我生活中的一个巨大压力源,我希望有人能解决这个问题。
最快的方法是使用本机 android / ios sdk 并避免阻塞 JS 线程,那里有一些库将提供一个反应本机模块来做这(他们都有一个小的 js api,通过反应本机桥与运行所有 firebase 逻辑的本机端通信)
react-native-firebase 就是这样一个库。它遵循 firebase web sdk 的 api,因此,如果您知道如何使用 web sdk,那么您应该能够使用与此模块完全相同的逻辑以及其他 firebase apis在本机 SDKS 上可用。
例如,它包含一个存储实现和一个方便的 putFile
功能,您可以为其提供设备上文件的路径,它会使用本机 firebase 为您上传sdks,没有文件处理在JS线程上完成,因此非常快。
示例:
// other built in paths here: https://github.com/invertase/react-native-firebase/blob/master/lib/modules/storage/index.js#L146
const imagePath = firebase.storage.Native.DOCUMENT_DIRECTORY_PATH + '/myface.png';
const ref = firebase.storage().ref('selfies').child('/myface.png');
const uploadTask = ref.putFile(imagePath);
// .on observer is completely optional (can instead use .then/.catch), but allows you to
// do things like a progress bar for example
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, (snapshot) => {
// observe state change events such as progress
// get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log(`Upload is ${progress}% done`);
switch (snapshot.state) {
case firebase.storage.TaskState.SUCCESS: // or 'success'
console.log('Upload is complete');
break;
case firebase.storage.TaskState.RUNNING: // or 'running'
console.log('Upload is running');
break;
default:
console.log(snapshot.state);
}
}, (error) => {
console.error(error);
}, () => {
const uploadTaskSnapshot = uploadTask.snapshot;
// task finished
// states: https://github.com/invertase/react-native-firebase/blob/master/lib/modules/storage/index.js#L139
console.log(uploadTaskSnapshot.state === firebase.storage.TaskState.SUCCESS);
console.log(uploadTaskSnapshot.bytesTransferred === uploadTaskSnapshot.totalBytes);
console.log(uploadTaskSnapshot.metadata);
console.log(uploadTaskSnapshot.downloadUrl)
});
免责声明: 我是 react-native-firebase 的作者。
我只想将使用 react-native-camera 拍摄的照片上传到带有 react-native-fetch-blob 的 firebase 存储,但无论我做什么都不会发生。
我已经查看了我能找到的所有文档,但似乎没有任何效果。
如果有人有完成此任务的工作系统,请post将其作为答案。我可以获得 react-native-camera returns 的 jpg 的 uri(它显示在 ImageView 和所有内容中),但是我的上传功能似乎在放置 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 = firebase.storage().ref('selfies').child(imageName)
console.log("uploadUri",uploadUri)
fs.readFile(uploadUri, 'base64').then((data) => {
console.log("MADE DATA")
var blobEvent = new Blob(data, 'image/jpg;base64')
var blob = null
blobEvent.onCreated(genBlob => {
console.log("CREATED BLOB EVENT")
blob = genBlob
firebase.storage().ref('selfies').child(imageName).put(blob).then(function(snapshot) {
console.log('Uploaded a blob or file!');
firebase.database().ref("selfies/" + firebase.auth().currentUser.uid).set(0)
var updates = {};
updates["/users/" + firebase.auth().currentUser.uid + "/signup/"] = 1;
firebase.database().ref().update(updates);
});
}, (error) => {
console.log('Upload Error: ' + error)
alert(error)
}, () => {
console.log('Completed upload: ' + uploadTask.snapshot.downloadURL)
})
})
}).catch((error) => {
alert(error)
})
}
我希望尽可能高效,所以如果它更快并且占用更少的内存而不将其更改为 base64,那么我更喜欢它。现在我只是不知道如何进行这项工作。
这一直是我生活中的一个巨大压力源,我希望有人能解决这个问题。
最快的方法是使用本机 android / ios sdk 并避免阻塞 JS 线程,那里有一些库将提供一个反应本机模块来做这(他们都有一个小的 js api,通过反应本机桥与运行所有 firebase 逻辑的本机端通信)
react-native-firebase 就是这样一个库。它遵循 firebase web sdk 的 api,因此,如果您知道如何使用 web sdk,那么您应该能够使用与此模块完全相同的逻辑以及其他 firebase apis在本机 SDKS 上可用。
例如,它包含一个存储实现和一个方便的 putFile
功能,您可以为其提供设备上文件的路径,它会使用本机 firebase 为您上传sdks,没有文件处理在JS线程上完成,因此非常快。
示例:
// other built in paths here: https://github.com/invertase/react-native-firebase/blob/master/lib/modules/storage/index.js#L146
const imagePath = firebase.storage.Native.DOCUMENT_DIRECTORY_PATH + '/myface.png';
const ref = firebase.storage().ref('selfies').child('/myface.png');
const uploadTask = ref.putFile(imagePath);
// .on observer is completely optional (can instead use .then/.catch), but allows you to
// do things like a progress bar for example
uploadTask.on(firebase.storage.TaskEvent.STATE_CHANGED, (snapshot) => {
// observe state change events such as progress
// get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
const progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log(`Upload is ${progress}% done`);
switch (snapshot.state) {
case firebase.storage.TaskState.SUCCESS: // or 'success'
console.log('Upload is complete');
break;
case firebase.storage.TaskState.RUNNING: // or 'running'
console.log('Upload is running');
break;
default:
console.log(snapshot.state);
}
}, (error) => {
console.error(error);
}, () => {
const uploadTaskSnapshot = uploadTask.snapshot;
// task finished
// states: https://github.com/invertase/react-native-firebase/blob/master/lib/modules/storage/index.js#L139
console.log(uploadTaskSnapshot.state === firebase.storage.TaskState.SUCCESS);
console.log(uploadTaskSnapshot.bytesTransferred === uploadTaskSnapshot.totalBytes);
console.log(uploadTaskSnapshot.metadata);
console.log(uploadTaskSnapshot.downloadUrl)
});
免责声明: 我是 react-native-firebase 的作者。