Блог

Главная - Вопросы по программированию - Загрузка пустого файла при отправке

Загрузка пустого файла при отправке

#javascript #reactjs #file-upload #axios #multipartform-data

#javascript #reactjs #загрузка файла #axios #multipartform-данные

Вопрос:

Я пытаюсь загрузить изображение, используя Axios внутри объекта. Я могу получить файл с помощью new FormData() и поместить его в объект, но отправка изображения пуста. Как мне загрузить файл в объект в сочетании с другими данными JSON?

 import React, { useState } from 'react';
import axios from 'axios';

function UploadFiles() {
  const [submitFile, setSubmitFile] = useState({});

  const handleChange = e => {
    setSubmitFile(e.target.files[0]);
  };

  const handleSubmit = () => {
    const formData = new FormData();
    formData.append('document', submitFile);
    formData.append('Answer_name', 'image');
    formData.append('Document', true);
    formData.append('Answer', 'Got some data');

    console.log(submitData) // I get formData data

    const submitData = {
      UUID_Formulier: '117F994F-F803-7249-91E9-EE1E7B691DFF',
      answers: [formData], // this will be an empty object on calling axios.post
    };
    axios
      .post('/submit', submitData, {
        headers: {
          'Content-Type': 'multipart/form-data',
        },
      })
      .then(() => {
        console.log('success');
      })
      .catch(() => {
        console.log('failed error');
      });
  };

  return (
    <div>
      <input type="file" name="image" onChange={handleChange} />
      <button onClick={handleSubmit}>Submit</button>
    </div>
  );
}

Изображение должно быть помещено в массив ответов. Когда я помещаю FormData в массив ответов, это пустой объект. Как я могу поместить файл FormData в объект или массив JSON, а затем отправить все?

Использование обозначения в квадратных скобках создает не массив, а строки, как показано ниже. введите описание изображения здесь

Ответ №1:

Все ваши данные должны быть добавлены в объект FormData, чтобы получить данные в виде массива, вы можете попробовать использовать квадратные скобки.

 const formData = new FormData();
formData.append('UUID_Formulier', '117F994F-F803-7249-91E9-EE1E7B691DFF');
formData.append('answers[0][document]', submitFile);
formData.append('answers[0][Answer_name]', 'image');
formData.append('answers[0][Document]', true);
formData.append('answers[0][Answer]', 'Got some data'); 

console.log(formData) // I get formData data

axios
  .post('/submit', formData, {
    headers: {
      'Content-Type': 'multipart/form-data',
    },
  })
  .then(() => {
    console.log('success');
  })
  .catch(() => {
    console.log('failed error');
  });

};

Комментарии:

1. Спасибо за подсказки @Musa, к сожалению, обозначение в квадратных скобках не создает массивы. Проверьте обновленный вопрос на скриншоте ответа данных, отправленного на сервер.

2. Что вы используете на стороне сервера?

3. Серверная часть — laravel.

4. Ну, с PHP поля файлов отделены от текстовых полей, поэтому я не думаю, что вы сможете достичь желаемой структуры с помощью полей файлов

Ответ №2:

Решаемая проблема путем преобразования файла в строку base64.

 function getBase64(file) {
  return new Promise(function(resolve, reject) {
    const reader = new FileReader();
    reader.onload = function() {
      resolve(reader.result);
    };
    reader.onerror = reject;
    reader.readAsDataURL(file);
  });
}

const [form, setForm] = useState([]);
const fileFound = e.target.type === 'file' amp;amp; e.target.files[0];

const promise = fileFound amp;amp; getBase64(fileFound);

promise.then(function(result) {
   setForm([
      ...form,
      {
         UUID_Answer: 'image_name,
         Answer: '',
         Document: true,
         Document_Upload: result,
      },
   ]);
});

const submitData = {
    UUID_Formulier: '117F994F-F803-7249-91E9-EE1E7B691DFF',
    answers: form,
  };

axios
  .post('/submit', submitData)
  .then(() => {
    console.log('success');
  })
  .catch(() => {
    console.log('failed error');
  });