Мы хотим отправить файл изображения в виде multipart / form на сервер, мы пытаемся использовать 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>
    )
  }
}

Ошибка в бэкэнде"вложенное исключение - org.springframework.web.multipart.MultipartException: не удалось проанализировать многочастный запрос сервлета; вложенное исключение - java.io.IOException: org.apache.tomcat.util.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!");
    });
  }

На этот раз ошибка в бэкэнде:Servlet.service () для сервлета [dispatcherServlet] в контексте с путем [] вызвала исключение [Ошибка обработки запроса; Вложенное исключение - java.lang.NullPointerException] с основной причиной

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