[英]React Native Firebase Multiple Image Upload Problem
In React Native, I select images using the ImagePicker package and upload images to Firebase Storage.在 React Native 中,我使用 ImagePicker package select 图像并将图像上传到 Firebase 存储。 I also want to send Firebase Storage image links using the Getdownloadurl() method with the Firebase Rest Api. I also want to send Firebase Storage image links using the Getdownloadurl() method with the Firebase Rest Api.
I manage to upload images, but when I send them by making a rest api post request, the image links go undefined.我设法上传图像,但是当我通过发出 rest api 发布请求发送它们时,图像链接 go未定义。 I'm following from the console screen making a post request without 100% of the total image size.我正在从控制台屏幕发出一个没有 100% 的总图像大小的发布请求。
const uploadImage = async (uploadUri: string, transferred: number) => {
let filename = uploadUri.substring(uploadUri.lastIndexOf('/') + 1);
transferred = 0;
const storageRef = storage().ref(`images/${filename}`);
const task = storageRef.putFile(uploadUri);
task.on('state_changed', taskSnapshot => {
console.log(`${taskSnapshot.bytesTransferred} transferred out of ${taskSnapshot.totalBytes}`);
transferred = Math.round((taskSnapshot.bytesTransferred / taskSnapshot.totalBytes) * 100);
});
try {
await task;
const url = await storageRef.getDownloadURL();
return url;
} catch (error) {
console.log(error);
return null;
}
}
export const addPost = (files: string[], post: Post): ThunkAction<void, RootState, null, AddPostAction> => {
return async dispatch => {
try {
dispatch({ type: ADD_POST_LOADING, payload: true });
const imageData: Image[] = [];
files.map(async (item) => {
const imageUrl = await uploadImage(item, 0);
imageData.push({ image: imageUrl! });
});
const postData: Post = {
...post,
thumb: imageData[0].image
}
const response = await fetch(`${BASE_URL}/post.json`, { method: "POST", body: JSON.stringify(postData) });
if (response.ok) {
const successPostData: AddPostSuccess = await response.json();
dispatch({ type: ADD_POST_SUCCESS, payload: successPostData });
} else {
dispatch({ type: ADD_POST_ERROR, payload: "404" });
}
} catch (error) {
console.log(error);
}
}
}
A map
can't handle async
code. map
无法处理async
代码。 Try to change this part:尝试改变这部分:
files.map(async (item) => {
const imageUrl = await uploadImage(item, 0);
imageData.push({ image: imageUrl! });
});
to this:对此:
for (let i = 0; i < files.length; i++) {
const item = files[i];
const imageUrl = await uploadImage(item, 0);
imageData.push({ image: imageUrl! });
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.