Я использую response-dropzone для массовой загрузки изображений на свой сервер. В документации сказано, что функция onChange возвращает массив файлов. Я сохраняю этот массив файлов в свой объект состояния. https://www.npmjs.com/package/material-ui-dropzone
Переданный объект имеет вид
this.state = {
title: '',
description: '',
pictures: []
};
Мой вызов fetch на мой сервер выглядит так
createProject = () => {
let formData = new FormData();
formData.append('title', this.state.title);
formData.append('description', this.state.description);
formData.append('pictures', this.state.pictures);
fetch("http://localhost:5000/api/project/uploadProject",
{
mode: 'no-cors',
method: "POST",
body: formData
}).then(function (res) {
if (res.ok) {
alert("Perfect! ");
} else if (res.status == 401) {
alert("Oops! ");
}
}, function (e) {
alert("Error submitting form!");
});
}
Мой бэкэнд, созданный с помощью Spring, имеет конечную точку, написанную как
@RequestMapping(path = "/uploadProject", method = RequestMethod.POST,
consumes = {"multipart/form-data"})
public void uploadFile( @ModelAttribute ProjectRequest projectRequest) {
И наконец, моя модель ProjectRequest выглядит как
public class ProjectRequest {
@NotBlank
@Size(max = 140)
private String title;
@NotBlank
private String description;
@Size(max = 4)
private List<MultipartFile> pictures;
Когда я запускаю вызов fetch, я все время получаю эту ошибку от Spring, говоря, что я передаю массив строк, и его нельзя преобразовать в массив MultipartFile
Resolved [org.springframework.validation.BindException: org.springframework.validation.BeanPropertyBindingResult: 1 errors Field error in object 'projectRequest' on field 'pictures': rejected value []; codes [typeMismatch.projectRequest.pictures,typeMismatch.pictures,typeMismatch.java.util.List,typeMismatch]; arguments [org.springframework.context.support.DefaultMessageSourceResolvable: codes [projectRequest.pictures,pictures]; arguments []; default message [pictures]]; default message [Failed to convert property value of type 'java.lang.String' to required type 'java.util.List' for property 'pictures'; nested exception is java.lang.IllegalStateException: Cannot convert value of type 'java.lang.String' to required type 'org.springframework.web.multipart.MultipartFile' for property 'pictures[0]': no matching editors or conversion strategy found]]
Я попытался жестко закодировать массив строк в поле изображений и настроить список изображений модели projectRequest на прием списка строк, чтобы проверить, правильно ли я написал конечную точку серверной части, но это прошло нормально. По какой-то причине он не работает, только когда у меня есть массив файлов в параметре изображений.
Кто-нибудь знает, почему продолжает возникать эта ошибка?
Обновлено: Итак, я нашел точную проблему, с которой я столкнулся, по этой ссылке: Файловый объект становится строкой при помещении в массив? JS
Кто-нибудь знает, как я могу получить массив строк [объектный файл]?




Таким образом можно отправить массив файлов. Просмотрите файлы и добавьте их в данные формы с тем же ключом, который используется в вашей модели ProjectRequest.
for(let i=0; i< this.state.pictures.length; i++){
formData.append("pictures",this.state.pictures[i]);
}
На стороне сервера никаких изменений не требуется.