将我的图片上传从1张扩展到5张； map / foreach？

Question

我正在创建一个应用，您可以在其中将照片和其他数据上传到Firebase。上载部分与一张图片完美配合。但是，我现在添加了多张图片（选择1至5张图片），并且希望我的图片上传功能可以上传5张图片而不是1张图片。图像上传可使用提供的1张图像，因此如何重新排列代码以上传阵列中x量的照片？

这些图片将与以下数据一起添加到photos数组中（下面显示的输出是从获取的图片中获取的console.log）；

Array [
  Object {
    "exists": true,
    "file": "ph://8905951D-1D94-483A-8864-BBFDC4FAD202/L0/001",
    "isDirectory": false,
    "md5": "f9ebcab5aa0706847235887c1a7e4740",
    "modificationTime": 1574493667.505371,
    "size": 104533,
    "uri": "ph://8905951D-1D94-483A-8864-BBFDC4FAD202/L0/001",
  },

有了这个didFocus，我检查是否设置了fethedImages参数，并将photos数组设置为获取的图像（因此，上面显示的所有数据）

 const didFocusSubscription = props.navigation.addListener(
        'didFocus', () => {
            let fetchedImages = props.navigation.getParam('fetchedImages')
            console.log(fetchedImages)
            setPhotos(fetchedImages)
            setImageValid(true)
            calculateImageDimensions()
        }
    );

[当我保存页面并开始分派数据时，我运行以下命令，运行uploadImage函数并返回一个uploadurl，然后将其保存在分派函数中，然后保存到Firebase数据库中，以便稍后获取；

 uploadurl = await uploadImageAsync(photos)

因此uploadImageAsync从转发的photos数组开始。如何确保阵列中的每个photo.uri都启动了以下功能？我可以为此使用.map，在什么情况下应该使用.map？另外，我不太确定如何发送回URL数组以与其余信息一起保存。

  async function uploadImageAsync(photos) {
        console.log('uploadImage is gestart')
        // Why are we using XMLHttpRequest? See:
        // https://github.com/expo/expo/issues/2402#issuecomment-443726662
        const blob = await new Promise((resolve, reject) => {
            const xhr = new XMLHttpRequest();
            xhr.onload = function () {
                resolve(xhr.response);
            };
            xhr.onerror = function (e) {
                console.log(e);
                reject(new TypeError('Network request failed'));
            };
            xhr.responseType = 'blob';
            xhr.open('GET', photos, true);
            xhr.send(null);
        });

        const ref = firebase
            .storage()
            .ref()
            .child(uuid.v4());
        const snapshot = await ref.put(blob);

        // We're done with the blob, close and release it
        blob.close();

        return await snapshot.ref.getDownloadURL();

    }

=============由于上载进度进行了编辑=====================>

再一次，我再进一步一点。但是，图像上传功能现在正在运行，由于存在多个图像，因此我想在继续之前等待所有图像的响应。

    try {
        uploadurl = await uploadImageAsync()
        address = await getAddress(selectedLocation)
        console.log(uploadurl)
        if (!uploadurl.lenght) {
            Alert.alert('Upload error', 'Something went wrong uploading the photo, plase try again', [
                { text: 'Okay' }
            ]);
            return;
        }

        dispatch(
此刻，当我启动uploadImageAsync函数时。在console.log的帮助下，我看到它上传了图像，它们也在线显示。但是，在上传图片时，上传网址已经返回0，并显示警告并停止了该功能。 

uploadImageAsync = async () => {
    const provider = firebase.database().ref(`providers/${uid}`);
    let imagesArray = [];
    try {
        await photos.map(img => {
            let file = img.data;
            const path = "Img_" + uuid.v4();
            const ref = firebase
                .storage()
                .ref(`/${uid}/${path}`);
            ref.putString(file).then(() => {
                ref
                    .getDownloadURL()
                    .then(images => {
                        imagesArray.push({
                            uri: images
                        });
                        console.log("Out-imgArray", imagesArray);
                    })
        return imagesArray   <== this return imagesArray is fired to early and starts the rest of my upload function. 
    } catch (e) {
        console.error(e);
    }
};

我正在创建一个应用，您可以在其中将照片和其他数据上传到Firebase。上载部分与一张图片完美配合。但是我现在添加了多张图片（选择1 ...

Answer 1

因此，Discord聊天为我指明了promise.all函数的全部功能。我试过了，但是打开了另一个堆栈溢出主题以使它起作用。