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

Question

Мы хотим отправить файл изображения в виде 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: запрос был отклонен, поскольку не было найдено многострочной границы ".

После прочтения this, мы попытались установить граничными к заголовкам в выборках:

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. Как мы можем получить его правильно?

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

Answer 2

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