Как я могу загрузить несколько изображений в firebase, реагируя другим способом?

Я хочу console.log() в console.log(list) the uploadBytes моего изображения, чтобы я мог реализовать его и передать на моем бэкэнде, не отделяя его.

Код примерно такой

const handleSubmitForm = e => {
    e.preventDefault()
    alert("Your Images Is Uploaded")

    const imagesRef = ref(storage,`GALLERY/${image.name}${v4()}`)
    const imagesRef2 = ref(storage,`GALLERY/${image2.name}${v4()}`)
    const imagesRef3 = ref(storage,`GALLERY/${image3.name}${v4()}`)
    const imagesRef4 = ref(storage,`GALLERY/${image4.name}${v4()}`)
    const imagesRef5 = ref(storage,`GALLERY/${image5.name}${v4()}`)
    const id = v4()
    const Uploads = async() => {
        const list = []
        uploadBytes(imagesRef,image)
        .then((snapshot) => {
          getDownloadURL(snapshot.ref).then((url) => {
            console.log('Image uploaded' + `${url}`)
            const item = url
            list.push(item)
          })
        })
        uploadBytes(imagesRef2,image2)
        .then((snapshot) => {
          getDownloadURL(snapshot.ref).then((url) => {
            console.log('Image uploaded' + `${url}`)
            const item = url
            list.push(item)
          })
        })
        uploadBytes(imagesRef3,image3)
        .then((snapshot) => {
          getDownloadURL(snapshot.ref).then((url) => {
            console.log('Image uploaded' + `${url}`)
            const item = url
            list.push(item)
          })
        })
        uploadBytes(imagesRef4,image4)
        .then((snapshot) => {
          getDownloadURL(snapshot.ref).then((url) => {
            console.log('Image uploaded' + `${url}`)
            const item = url
            list.push(item)
          })
        })
        uploadBytes(imagesRef5,image5)
        .then((snapshot) => {
          getDownloadURL(snapshot.ref).then((url) => {
            console.log('Image uploaded' + `${url}`)
            const item = url
            list.push(item)
          })
        })
        console.log(list)
    }
    Uploads()
}

Моя единственная проблема здесь заключается в const list = [], где я хочу добавить каждый uploadBytes в свой список, чтобы мне не приходилось повторно вызывать бэкэнд, потому что Имма помещает туда бэкэнд в каждый uploadBytes, но я хочу сделать это более простым. как просто нажать его в списке.

Я пытался сделать это в асинхронном режиме, но это не сработало. Это просто дает мне пустой массив, потому что я не знаю? Я просто думаю, что мне нужно сделать uploadBytes асинхронным, но все равно не работает.

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
0
18
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Если я правильно понимаю ваш вопрос, вы хотите зарегистрировать список URL-адресов загрузки после того, как все изображения будут загружены.

Это требует, чтобы вы обрабатывали две асинхронные операции для каждой загрузки:

  • загрузка самих данных,
  • вызов для получения URL-адреса загрузки.

Поскольку вам нужно сделать это для каждого изображения, вам понадобится Promise.all, а поскольку это два вызова, вам понадобится цепочка операций then.

В сочетании это приводит к:

// Helper function to upload an image and get back its download URL
const UploadSingleImage = (ref, image) => {
  return uploadBytes(ref, image).then((snapshot) => {
    return getDownloadURL(ref);
  })
}

const Uploads = async () => {
  const list = await Promise.all([
    UploadSingleImage(imagesRef,  image),
    UploadSingleImage(imagesRef2, image2),
    UploadSingleImage(imagesRef3, image3),
    UploadSingleImage(imagesRef4, image4),
    UploadSingleImage(imagesRef5, image5)
  ]);

  console.log(list)
}

Другие вопросы по теме