问题
我正在尝试创建一个应用程序与react native和firebase。我想为这个应用程序的功能之一是上传图像的能力。我在上传图片到firebase存储时遇到了一些麻烦。我使用expo的图片选择器来查找用户想要上传的图片的路径,但是一旦我找到了路径,我不知道如何将其转换为可以上传到firebase的东西。
有人能帮我把图片的路径转换成我可以用react native上传到firebase存储的东西吗?
我尝试过的
我尝试使用:
_pickImage = async () => {
let result = await ImagePicker.launchImageLibraryAsync({
MediaTypeOptions: 'Images',
quality: 0.4,
_uploadAsByteArray = async (pickerResultAsByteArray, progressCallback) => {
try {
var metadata = {
contentType: 'image/jpeg',
};
var storageRef = firebase.storage().ref();
var ref = storageRef.child('images/'+expoID+'/'+this.state.time)
let uploadTask = ref.put(pickerResultAsByteArray, metadata)
uploadTask.on('state_changed', function (snapshot) {
progressCallback && progressCallback(snapshot.bytesTransferred / snapshot.totalBytes)
var progress = (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
console.log('Upload is ' + progress + '% done');
}, function (error) {
console.log("in _uploadAsByteArray ", error)
}, function () {
var downloadURL = uploadTask.snapshot.downloadURL;
console.log("_uploadAsByteArray ", uploadTask.snapshot.downloadURL)
this.setState({imageUploaded:true})
});
} catch (ee) {
console.log("when trying to load _uploadAsByteArray ", ee)
}
}
convertToByteArray = (input) => {
var binary_string = this.atob(input);
var len = binary_string.length;
var bytes = new Uint8Array(len);
for (var i = 0; i < len; i++) {
bytes[i] = binary_string.charCodeAt(i);
}
return bytes
}
atob = (input) => {
const chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=';
let str = input.replace(/=+$/, '');
let output = '';
if (str.length % 4 == 1) {
throw new Error("'atob' failed: The string to be decoded is not correctly encoded.");
}
for (let bc = 0, bs = 0, buffer, i = 0;
buffer = str.charAt(i++);
~buffer && (bs = bc % 4 ? bs * 64 + buffer : buffer,
bc++ % 4) ? output += String.fromCharCode(255 & bs >> (-2 * bc & 6)) : 0
) {
buffer = chars.indexOf(buffer);
}
return output;
}
uploadImage(bsfdata){
this.setState({imageUploaded:false})
this._uploadAsByteArray(this.convertToByteArray(bsfdata), (progress) => {
this.setState({ progress:progress })
})
}
base64:true,
});
/* if (!result.cancelled) {
this.setState({ image: result.uri });
let formData = new FormData();
formData.append('photo', {
uri,
name: `photo.${fileType}`,
type: `image/${fileType}`,
});}*/
this.uploadImage(result.base64);
};
}
字符串
我试过添加注解代码,这不会上传任何东西,我试过现在的代码,这给了我错误Can currently only create a Blob from other Blobs
,上传进度从未超过0%。
6条答案
按热度按时间4dc9hkyq1#
如果你使用的是expo(>=26),那么你可以通过下面的代码行轻松地完成它。
字符串
参考:https://youtu.be/KkZckepfm2Q
sf6xfgos2#
不知道这对谁有帮助,但如果您使用
MediaLibrary
从图库加载图像,则uri的格式为uri = file:///storage/emulated/0/DCIM/Camera/filename.jpg
。在本例中,使用
fetch(uri)
并不能帮助我获得blob。但是如果您使用
fetch(uri.replace("file:///","file:/"))
,然后按照@sriteja Sugoor的答案,您将能够上传文件blob。zsohkypk3#
参考此链接-https://github.com/dailydrip/react-native-firebase-storage/blob/master/src/App.js#L43-L69
以下代码块运行正常。
字符串
5ktev3wc4#
只有
.blob()
在react native不工作!你需要一个函数字符串
并上传到firebase的功能:
型
1l5u6lss5#
您需要安装
rn-fetch-blob
模块:字符串
然后,执行以下操作:
型
如果代码中有你不明白的地方,请务必询问。要上传多个图像,只需用for循环 Package 这段代码。或者,如果您想确保每个图像都上传无误,请使用
Promise
xxls0lw86#
字符串