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

Question

Я хочу загрузить файл, загрузив 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> 

Answer 1

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

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

Вы можете попробовать:

var formData = new FormData();

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

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

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>

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

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

Answer 2

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

Answer 3

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

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