Реагировать.js, как отправить multipart / form-data на сервер

мы хотим отправить файл изображения в виде составной / формы на бэкэнд, мы пытаемся использовать html-форму, чтобы получить файл и отправить файл в виде formData, вот коды

export default class Task extends React.Component {

  uploadAction() {
    var data = new FormData();
    var imagedata = document.querySelector('input[type="file"]').files[0];
    data.append("data", imagedata);

    fetch("http://localhost:8910/taskCreationController/createStoryTask", {
      mode: 'no-cors',
      method: "POST",
      headers: {
        "Content-Type": "multipart/form-data"
        "Accept": "application/json",
        "type": "formData"
      },
      body: data
    }).then(function (res) {
      if (res.ok) {
        alert("Perfect! ");
      } else if (res.status == 401) {
        alert("Oops! ");
      }
    }, function (e) {
      alert("Error submitting form!");
    });
  }

  render() {
    return (
        <form encType="multipart/form-data" action="">
          <input type="file" name="fileName" defaultValue="fileName"></input>
          <input type="button" value="upload" onClick={this.uploadAction.bind(this)}></input>
        </form>
    )
  }
}

ошибка в backend составляет "вложенные исключением является org.springframework.сеть.составной.MultipartException: не удалось разобрать запрос многоэлементного сервлета; вложенным исключением является java.Ио.IOException: org.апаш.кот.утиль.http.fileupload с.FileUploadException: запрос был отклонен, так как не было многоэлементной границы найдено."

после прочтения этой, мы попытались установить границу для заголовков в fetch:

fetch("http://localhost:8910/taskCreationController/createStoryTask", {
      mode: 'no-cors',
      method: "POST",
      headers: {
        "Content-Type": "multipart/form-data; boundary=AaB03x" +
        "--AaB03x" +
        "Content-Disposition: file" +
        "Content-Type: png" +
        "Content-Transfer-Encoding: binary" +
        "...data... " +
        "--AaB03x--",
        "Accept": "application/json",
        "type": "formData"
      },
      body: data
    }).then(function (res) {
      if (res.ok) {
        alert("Perfect! ");
      } else if (res.status == 401) {
        alert("Oops! ");
      }
    }, function (e) {
      alert("Error submitting form!");
    });
  }

на этот раз ошибка в бэкэнде:сервлет.service () для сервлета [dispatcherServlet] в контексте с path [] бросил исключение [ошибка обработки запроса; вложенным исключением является java.ленг.NullPointerException] с основной причиной

добавим ли мы многоэлементную границу справа? Где он должен быть? Возможно, мы ошибаемся, потому что мы не получайте данные multipart / form-data. Как мы можем получить его правильно?

9
file-upload multipartform-data reactjs

3 ответов

мы просто пытаемся удалить наши заголовки, и это работает!

fetch("http://localhost:8910/taskCreationController/createStoryTask", {
      mode: 'no-cors',
      method: "POST",
      body: data
    }).then(function (res) {
      if (res.ok) {
        alert("Perfect! ");
      } else if (res.status == 401) {
        alert("Oops! ");
      }
    }, function (e) {
      alert("Error submitting form!");
    });
5

для передачи multipart/formdata, вам нужно избегать contentType, так как браузер автоматически назначает boundary и Content-Type.

в вашем случае с помощью fetch, даже если вы избегаете Content-Type Он устанавливает значение по умолчанию text/plain. Поэтому попробуйте с jQuery ajax. который удаляет contentType если мы установим значение false.

это рабочий код

var data = new FormData();
var imagedata = document.querySelector('input[type="file"]').files[0];
data.append("data", imagedata);
$.ajax({
    method: "POST",
    url: fullUrl,
    data: data,
    dataType: 'json',
    cache: false,
    processData: false,
    contentType: false
}).done((data) => {
    //resolve(data);
}).fail((err) => {
    //console.log("errorrr for file upload", err);
    //reject(err);
});
0

файл также доступен в случае:

e.target.files[0]

(исключает необходимость document.querySelector('input[type="file"]').files[0];)

uploadAction() {
  const data = new FormData();
  const imagedata = e.target.files[0];
  data.append('inputname', imagedata);
  ...

Примечание: Использовать console.log(data.get('inputname')) для отладки, console.log(data) не будет отображать добавленные данные.

0