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

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

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

1 个答案: