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

Posted 2023-03-22

【中文标题】将我的图片上传从 1 张扩大到 5 张；地图/foreach？

【英文标题】：Expand my image upload from 1 to 5 photos; map/foreach?

【发布时间】：2020-03-25 17:52:27

【问题描述】：

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

图片与以下数据一起添加到照片数组中（下面显示的输出是从获取的图像中获取的控制台日志）；

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()
        
    );

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

 uploadurl = await uploadImageAsync(photos)

所以 uploadImageAsync 以转发的照片数组开始。如何确保为数组中的每个 photo.uri 启动以下函数？我可以为此使用 .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 的帮助下，我看到它正在上传图像，它们也出现在网上。但是，当图片上传时，上传 url 已经返回 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 存储，然后为每个图像下载 uri？

异步函数uploadImageAsync获取本地图像文件并将其上传到firestore并最终返回图像的URL。然后，此 URL 与其他图像信息一起存储到 Firebase 数据库中。此信息用于在不同的页面上显示图像和有关图片的信息 这适用于一张图片。现在我想把这个函数改成上传5张图片，然后返回5个图片URL保存到数据库中，用于查看图片和其余信息。我希望你现在清楚了吗？

你能查一下this

谢谢 DevAS，看起来和我遇到的问题一样。研究这个主题并尝试在我的代码中包含相关部分。

祝你好运，如果你解决了它，别忘了在那里投票我的问题并在这里分享你的答案

【参考方案1】：

因此，Discord 聊天向我指出了一个 promise.all 函数的方式，以使其正常工作。我试过了，但打开了另一个堆栈溢出主题来让它工作。

await response of image upload before continue function

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

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);
        );
;