Отправка изображений на серверную часть с помощью ReactJS

#reactjs

#reactjs

Вопрос:

Я хочу сделать post-запрос на серверную часть со всеми данными формы. Загружая изображения, я получаю массив с данными:

введите описание изображения здесь

 const normFile = e => {
    const getFileList = e.fileList.map( i => i.originFileObj);

    console.log('Upload event:', getFileList);

    fetch('https:///uploadapi', {
      method: 'POST',
        headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ images: getFileList })
    })
      .then(async response => {
        const data = await response.json();
        console.log(data, 'res data')
      })
      .catch(error => {
        console.error('There was an error!', error);
      });

    if (Array.isArray(e)) {
      return e;
    }
    return e amp;amp; e.fileList;
  };  

Выше приведен мой код, в котором я использую Ant Design uploader.

Но как удалить File текст перед каждым объектом?

Ответ №1:

Вы должны использовать заголовок multipart / form-data

Допустим, у вас есть входные данные

 <input type="file" onChange={uploadFile}/>  
  

И логическая часть:

 uploadFile = (e) => {
     const formData = new FormData();   
     formData.append('name_your_file', e.target.files[0])
     fetch('https:///uploadapi', {
     method: 'POST',
     headers: { 'Content-Type': 'multipart/form-data' },
     body: formData
    })
}