Загрузите несколько уникальных файлов на облачный и отправьте URL -адрес уникальных изображений на бэкэнд

Привет, в этом году я решил писать две технические статьи ежемесячно. Давай перейдем прямо в бизнес

Во-первых, вам придется создать новое приложение React, используя CREATE-React-APP CLI. Если у вас уже есть новое приложение React, вам повезло, вы можете пропустить этот шаг. Я назвал мой облачный, но вы можете назвать свою более творческим образом.

Затем нам понадобится форма HTML и пара элементов, а также элемент отправки для запуска процесса загрузки.

Мы будем придерживаться внутреннего состояния, следовательно, в этом случае. Кроме того, мы будем использовать библиотеку Axios для выполнения HTTP -запросов на внешние ресурсы. Установка Axios

Теперь мы создадим наш родительский компонент, который является app.js, и очистите весь сгенерированный код, чтобы иметь чистый и хороший компонент

import React from 'react';
import './App.css';

function App() {
  return (
    

    
  );
}

export default App;

Затем я импортирую внутреннее состояние из менеджера пакетов и подготовлю его к использованию. Добавьте следующий кодовый блок в компонент вашего приложения непосредственно перед оператором возврата.

  const [image1, setimage1] = useState()
  const [image2, setimage2] = useState()
  const [image3, setimage3] = useState()
  const [image4, setimage4] = useState()

Затем я создам несколько полей ввода файла типа в нашей форме HTML и установите состояние каждого из них. Добавьте следующий блок кода в свой тег Div.

      

        {
           setimage1(e.target.files[0])
        }}/>
        {
           setimage2(e.target.files[0])
        }}/>
        {
          setimage3(e.target.files[0])
       }}/>
        {
          setimage4(e.target.files[0])
       }}/>
       
      

Далее, создайте учетную запись на Облачный (Если у вас нет этого раньше), но обратите внимание, что Cloudarian будет попросить назначить вам общее имя, которое является «облачным именем», вы всегда можете изменить его на то, что вы можете легко запомнить, и получить свое API -ключ и загрузка изображения URL от вашей недавно созданной облачной панели панели.

Кроме того, нам нужно будет включить Unsigned загрузку в нашей учетной записи и скопировать предустановленное имя соответственно из настройки> загрузить и сохранение.

Я полагаю, что мы до сих пор добились прогресса, затем нам нужно будет создать ручка отправить Функция, которая содержит объект FormData для захвата необходимых параметров для несаутентированных запросов, таких как файл, upload_preset и api_key, а также отдельный запрос избрания. Вы можете проверить больше на Несаутентированный запрос

const handleSubmit = e=>{
  const url =
  'https://api.cloudinary.com/v1_1//image/upload';
const formData = new FormData();
formData.append('file', image1);
formData.append('upload_preset', '');
formData.append('api_key', '');

fetch(url, { method: 'POST',body: formData,})
  .then((res1) => {
    arrayName.push(res1.url);
    const formData1 = new FormData();
    formData.append('file', image2);
    formData.append('upload_preset', '');
    formData.append('api_key', '');
    return fetch(url, {
      method: 'POST',
      body: formData1,
    });
  })
  .then((res2) => {
    arrayName.push(res2.url);
    const formData2 = new FormData();
    formData.append('file', imag3);
    formData.append('upload_preset', '');
    formData.append('api_key', '');
    return fetch(url, {
      method: 'POST',
      body: formData2,
    });
  })
  .then((res3) => {
    arrayName.push(res3.url);
    const formData3 = new FormData();
    formData.append('file', image4);
    formData.append('upload_preset', '');
    formData.append('api_key', '');
    return fetch(url, {
      method: 'POST',
      body: formData3,
    });
  })
  .then((res4) => { 
    arrayName.push(res4.url);
                const newBackendUrl =  ''
                return fetch(newBackendUrl, {
                  image1:arrayName[0],
                  image2: arrayName[1],
                  image3: arrayName[2],
                  image4: arrayName[3]
                })
                .then((res) => {
                  console.log('👉 Returned data will show here ', res.data);
        })
                .catch((error) => 
                console.log('👉 Returned Error', error.stack)
        );
  })


}

Это моя первая статья, и я надеюсь, что вы найдете эту статью полезной. Я буду признателен за ваши комментарии, и если у вас есть какие -либо вопросы, не стесняйтесь поразить меня в Twitter Абубакар Омолаха Анкет Спасибо.

Оригинал: “https://dev.to/omolajacodec/upload-multiple-unique-file-on-cloudinary-and-send-unique-images-url-to-backend-51m1”