javascript - 将我上传的图片从1张照片扩展到5张照片； 地图/ foreach？(Expand my image upload from 1 to 5 photos; map/foreach?)

Question

I am creating an app in which you can upload a photo, with some other data, to Firebase.

(我正在创建一个应用程序，您可以在其中将照片和其他数据上传到Firebase。)

The uploading part worked perfect with one picture.

(上载部分与一张图片完美配合。)

However I have now added a multiple-image picture (select 1 to 5 pictures) and would like my image upload function to upload the 5 pictures in stead of the 1. The image upload works with 1 image provided, so how can I rearrange my code to upload the x-amount of photos in the array?

(但是，我现在添加了多张图片（选择1到5张图片），并希望我的图片上传功能可以上传5张图片而不是1张。图片上传提供了1张图片，因此如何重新排列我的图片？代码上传数组中照片的x量？)

The pictures are added in the photos array with the following data (output shown below is a console.log from the images fetched);

(这些图片将与以下数据一起添加到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",
  },

With this didFocus I check if the fethedImages param is set and set the photos array to the fetched images (So all the data that is shown above)

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

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

When I save the page and start dispatching the data I run the following command the uploadImage function is ran and returns an uploadurl, this is then saved later on in the dispatch function to the Firebase Database to be fetched later;

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

 uploadurl = await uploadImageAsync(photos)

SO the uploadImageAsync starts with the photos array forwarded.

(因此，uploadImageAsync从转发的photos数组开始。)

How can I make sure the function below is started for every photo.uri in the array?

(如何确保阵列中的每个photo.uri都启动了以下功能？)

Can I use .map of for each for this, and in what context should I be using this?

(我可以为此使用.map，在什么情况下应该使用.map？)

Also I am not quite sure how I can send back an array of URLs to be saved together with the rest of the information.

(另外，我不太确定如何发送回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();

    }

  ask by Markies translate from so

Answer 1

等待大神答复