将更多图像从react本机应用程序上载到firebase

Question

我试图上传多个图像从反应本机到Firebase。我这样做的方式是通过使用博览会图像选择器多-由monstrodev（见snack.io这里）

我已经设法让它工作，并设法能够选择多张照片从'即兴'相机辊。它们在添加屏幕中加载良好，但我找不到如何正确上传它们的解决方案。

        export default function Add(props) {

        const [name, setName] = useState("");
        const [photos, setPhotos] = useState(null);



        const uploadImage = async () => {
        const uri = photos[0].uri; // -> uri is like this because 'media' is an array with objects inside that contain name, type, and uri each, and I only need uri of each oject.
        const childPath = `data/${firebase.auth().currentUser.uid}/${Math.random().toString(36)}`;
        console.log(childPath);
        const response = await fetch(uri);
        const blob = await response.blob();

        const upload = firebase
            .storage()
            .ref()
            .child(childPath)
            .put(blob);

        const uploadProgress = snapshot => {
            console.log(`transferred: ${snapshot.bytesTransferred}`)
            };


            const uploadComplete = () => {
                    upload.snapshot.ref.getDownloadURL().then((snapshot) =>{
                        addPost(snapshot);
                        console.log(snapshot);
                    })
            };

            const uploadError = snapshot => {
                console.log(snapshot);
            };

            upload.on("state_changed", uploadProgress, uploadError, uploadComplete );

            
            };



        const addPost = (downloadURL) => {  
            firebase.firestore() 
            .collection("allPosts")
            .collection(firebase.auth().currentUser.uid)
            .collection('userPosts')
            .add({
            
                downloadURL,
                name,
            }).then((function () {
                props.navigation.popToTop()
            }))
        } 


        useEffect(() => {
        const {params} = props.route;
        if(params) {
        const {photos} = params;
        if(photos) setPhotos(photos)
        delete params.photos
        }

        }, [{photos}]) // This useEffect updates when coming back from the ImageBrowserScreen (can be found in snack.io, it's exactly the same) 

主要问题是，这么说吧，我选3张照片。如果我console.log（照片），我会得到这个：

  Array [
   Object {
    "name": "name1.JPG",
    "type": "image/jpg",
    "uri": "file:///name1.jpg",
   },
   Object {
    "name": "name2.JPG",
    "type": "image/jpg",
    "uri": "file:///name2.jpg",
   },
   Object {
    "name": "name3.JPG",
    "type": "image/jpg",
    "uri": "file:///name3.jpg",
   },
  ]

我唯一能让它工作的是这个，给uri确切的路径（例如照片[0]. uri），否则会出现网络错误。但这只上传第一个对象/照片。我还试图通过照片状态映射，并将所有uri返回到一个数组中，并将其用作const uri，但这显然不起作用，因为uri只需要一个字符串。因此，我需要为每个uri运行该函数，以便能够获得一个下载URL并存储它们。

编辑：

const uploadImage = async (photo) => {
const uri = photo.uri;
const childPath = `data/${
  firebase.auth().currentUser.uid
}/${Math.random().toString(36)}`;
console.log(childPath);
const response = await fetch(uri);
const blob = await response.blob();

const snapshot = await firebase.storage().ref().child(childPath).put(blob);
const downloadURL = await snapshot.ref.getDownloadURL();
imgs.push(downloadURL)
};

 const uploadPhotos = async () => {
  await Promise.all(photos.map(p=>uploadImage(photo)).then(addPost())
};

Answer 1

你能不能用一个循环试试，把所有的照片分开上传。理想地使用Promise.all并行上传它们：

 const addPost = async (downloadURLs) => {  
            await firebase.firestore() 
            .collection("allPosts")
            .collection(firebase.auth().currentUser.uid)
            .collection('userPosts')
            .add({
                downloadURLs,
                name,
            })
     props.navigation.popToTop()
        } 

  const uploadImage = async (photo) => {
    const uri = photo.uri;
    const childPath = `data/${
      firebase.auth().currentUser.uid
    }/${Math.random().toString(36)}`;
    console.log(childPath);
    const response = await fetch(uri);
    const blob = await response.blob();

    const snapshot = await firebase.storage().ref().child(childPath).put(blob);
    const downloadURL = await snapshot.ref.getDownloadURL();
    return downloadURL
  };

  const uploadPhotos = async () => {
      const downloadURLs=await Promise.all(photos.map(p=>uploadImage(photo))

      await addPost(downloadURLs);
  };