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

Мы хотим отправить файл образа как 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>
    )
  }
}

Ошибка в backend - это "вложенное исключение". org.springframework.web.multipart.MultipartException: не удалось разобрать многосердечный запрос сервлета, вложенное исключение - java.io.IOException: org.apache.tomcat.util.http.fileupload. FileUploadException: запрос был отклонен, потому что не было найдено многострочной границы ".

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

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!");
    });
  }

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

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

Ответ 1

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

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!");
    });

Ответ 2

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

e.target.files[0]

(устраняет необходимость в document.querySelector('input[type="file"]').files[0];)

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

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

Ответ 3

Реагировать на загрузку файлов

import { Component } from 'react';

class Upload extends Component {
  constructor() {
    super();
    this.state = {
      image: '',
    }
  }

  handleFileChange = e => {
    this.setState({
      [e.target.name]: e.target.files[0],
    })
  }

  handleSubmit = async e => {
    e.preventDefault();

    const formData = new FormData();
    for (let name in this.state) {
      formData.append(name, this.state[name]);
    }

    await fetch('/api/upload', {
      method: 'POST',
      body: formData,
    });

    alert('done');
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <input 
          name="image" 
          type="file"
          onChange={this.handleFileChange}>
        </input>
        <input type="submit"></input>
      </form>
    )
  }
}

export default Upload;

Ответ 4

Для отправки 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);
});