Загрузите файл в форму в React

Я хочу загрузить файл, получив api. Однако мой formData() возвращается пустым.

var formData = new FormData();
data.append("file", file[0]);

const options = {
    method: 'POST',
    headers: {...},
    body: formData
}

fetch("url", options)
    .then(resp => resp.json())
    .then(result => ... );

Вот моя форма:

<form onSubmit = {this.handleSubmit()}>
    upload file
    <button type = "submit"></button>
</form>

Я добавил образец изображения к своему ответу, а также ответил на ваш комментарий.

— 24.11.2018 02:05

javascript reactjs forms api file

22.11.2018 01:21

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Ответы 3

Я думаю, что вы ищете:

formData.set('file', file[0])

это вместо data.append("file", file[0]);?

— 22.11.2018 17:21

22.11.2018 01:25

Способ, который вы можете увидеть внутри formData, выглядит следующим образом:

for (var pair of formData.entries()) {
  console.info(pair[0]+ ', '+ pair[1]);
}

Можешь попробовать:

var formData = new FormData();

for (var key in files) {
  formData.append("file", file[0]);
}

Вот две функции, которые я написал ранее в моем классе React.Component:

var formData = new FormData();

handleFileUpload = files => {
  var chosenData = new FormData();
  var allFiles = [];
  for (var key in files) {
    if (!isNaN(key)) {
      chosenData.append("document", files[key].name);
    }
  }
  for (var pair of chosenData.entries()) {
    allFiles.push(pair[1]);
  }
  this.setState({ chosenFiles: allFiles });
  for (var obj in files) {
    if (!isNaN(obj)) {
      formData.append("document", files[obj]);
    }
  }
};

buttonClicked = e => {
  e.preventDefault();
  var newData = [];
  var newFormData = new FormData();
  if (
    this.state.chosenFiles.length !== formData.getAll("document").length
  ) {
    newData = formData
      .getAll("document")
      .slice(-this.state.chosenFiles.length);
    for (var obj = 0; obj < newData.length; obj++) {
      newFormData.append("document", newData[obj]);
    }
    this.fileUploader(newFormData);
  } else {
    this.fileUploader(formData);
  }
};

В моем рендере:

<div id = "selectFiles">
<label id = "docFileLabel" htmlFor = "docFile">
    Upload
  </label>
  <input
    type = "file"
    id = "docFile"
    className = "docFile"
    onChange = {e => {
      this.handleFileUpload(e.target.files, e);
    }}
    multiple
  />
</div>

Образец изображения:

Другой пример изображения:

Что вы вернули за свой formData? Вы положили это в свой body?

— 22.11.2018 18:48

Вы не сможете увидеть внутри formData, если не сделаете что-то вроде того, что я упомянул выше, используя formData.entries (). Я просто добавляю имя файла в formData, files [key] .name. Я добавлю к своему ответу еще одну функцию-образец, а также образец изображения.

— 24.11.2018 02:05

22.11.2018 01:43

data.append ("файл", файл [0]); должно быть formData.append ("файл", файл [0]);

Короткие ответы необходимо размещать в виде комментариев. См. stackoverflow.com/help/how-to-answer

— 23.11.2018 11:24

23.11.2018 11:19