Отправка запроса POST из приложения React с массивом файлов, полученная как массив строк в Spring API

Я использую 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

Кто-нибудь знает, как я могу получить массив строк [объектный файл]?

Пользовательский скаляр GraphQL
Пользовательский скаляр GraphQL
Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...
Как вычислять биты и понимать побитовые операторы в Java - объяснение с примерами
Как вычислять биты и понимать побитовые операторы в Java - объяснение с примерами
В компьютерном программировании биты играют важнейшую роль в представлении и манипулировании данными на двоичном уровне. Побитовые операции...
Поднятие тревоги для долго выполняющихся методов в Spring Boot
Поднятие тревоги для долго выполняющихся методов в Spring Boot
Приходилось ли вам сталкиваться с требованиями, в которых вас могли попросить поднять тревогу или выдать ошибку, когда метод Java занимает больше...
Полный курс Java для разработчиков веб-сайтов и приложений
Полный курс Java для разработчиков веб-сайтов и приложений
Получите сертификат Java Web и Application Developer, используя наш курс.
0
0
2 141
1

Ответы 1

Таким образом можно отправить массив файлов. Просмотрите файлы и добавьте их в данные формы с тем же ключом, который используется в вашей модели ProjectRequest.

for(let i=0; i< this.state.pictures.length; i++){
    formData.append("pictures",this.state.pictures[i]);
  }

На стороне сервера никаких изменений не требуется.

Другие вопросы по теме