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

Question

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

图片与以下数据一起添加到照片数组中（下面显示的输出是从获取的图像中获取的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参数，并将照片数组设置为获取的图像（所以上面显示的所有数据）

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

当我保存页面并开始分派数据时，我运行以下命令，运行上传图像功能，并返回上传URL，然后将其保存在分派功能中，稍后将获取Firebase数据库；

 uploadurl = await uploadImageAsync(photos)

因此uploadImageAsync从转发的照片数组开始。如何确保为每张照片启动以下功能。数组中的uri？我可以用吗。对于这一点，我应该在什么环境下使用它？此外，我也不太确定如何将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(

这时，我开始上传ImageAsync函数。在他的帮助下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);
    }
};

Answer 1

因此，一次不和谐的谈话给我指明了promise的方向。所有这些功能都可以让它工作。我试过了，但是打开了另一个堆栈溢出主题来让它工作。

在继续功能之前，等待图像上传的响应

我的图片上传功能的解决方案在上面的主题中；

uploadImages = () => {
    const provider = firebase.database().ref(`providers/${uid}`);
    // CHANGED: removed 'let imagesArray = [];', no longer needed

    return Promise.all(photos) // CHANGED: return the promise chain
        .then(photoarray => {
            console.log('all responses are resolved successfully');
            // take each photo, upload it and then return it's download URL
            return Promise.all(photoarray.map((photo) => { // CHANGED: used Promise.all(someArray.map(...)) idiom
              let file = photo.data;
              const path = "Img_" + uuid.v4();
              const storageRef = firebase // CHANGED: renamed 'ref' to 'storageRef'
                    .storage()
                    .ref(`/${uid}/${path}`);
              let metadata = {
                  contentType: 'image/jpeg',
              };

              // upload current photo and get it's download URL
              return storageRef.putString(file, 'base64', metadata) // CHANGED: return the promise chain
                .then(() => {
                  console.log(`${path} was uploaded successfully.`);
                  return storageRef.getDownloadURL() // CHANGED: return the promise chain
                    .then(fileUrl => ({uri: fileUrl}));
                });
            }));
        })
        .then((imagesArray) => {                       // These lines can
          console.log("Out-imgArray: ", imagesArray)   // safely be removed.
          return imagesArray;                          // They are just
        })                                             // for logging.
        .catch((err) => {
          console.error(err);
        });
};