Как отправить несколько файлов из Angular как FormData в Spring Boot как MultipartFile []?

Мой код ниже предназначен для загрузки одного файла, но я пытаюсь отправить сразу несколько файлов из Angular в Spring Boot. Отправка нескольких данных формы в ArrayList в Spring Boot приводит к null, и я не могу @RequestParam отправить данные одной формы в Spring Boot, поскольку количество файлов, отправляемых из Angular, является динамическим (определяется пользователем). Кто-нибудь может помочь?

Контроллер весенней загрузки:

@PostMapping("/jobAdApplication")
public void jobAdApplication (@RequestParam("files") MultipartFile[] files, 
   @RequestParam("candidateName") String candidateName) {
       (...)
}

Угловой компонент:

selectedFiles!: FileList;
file!: file;

(...)

if (this.selectedFiles) {
   let file: File | null = null;
   const formData: FormData = new FormData();

   for (let i = 0; i < this.selectedFiles.length; i++) {
      file = this.selectedFiles.item(i);
      if (file) {
         formData.append(`file${i}`, file);
      }
   }

   formData.append('candidateName', this.applyFormGroup.get('name')?.value);

   this.fileService.uploadFile(formData).subscribe({
      next: response => {
         alert('Files sent successfully')
         this.applyFormGroup.reset();
      },
      error: err => {
         alert(`Error: ${err.message}`);
      }
   });

   this.selectedFiles = undefined;
}

Угловой сервис:

uploadFile(jobAdApplication: FormData): Observable<any> {
   return this._http.post<any>(`${this.jobCandidateUrl}/jobAdApplication`, jobAdApplication);
}
Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest
В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...
Angular и React для вашего проекта веб-разработки?
Angular и React для вашего проекта веб-разработки?
Когда дело доходит до веб-разработки, выбор правильного front-end фреймворка имеет решающее значение. Angular и React - два самых популярных...
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Эпизод 23/17: Twitter Space о будущем Angular, Tiny Conf
Мы провели Twitter Space, обсудив несколько проблем, связанных с последними дополнениями в Angular. Также прошла Angular Tiny Conf с 25 докладами.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
Мое недавнее углубление в Angular
Мое недавнее углубление в Angular
Недавно я провел некоторое время, изучая фреймворк Angular, и я хотел поделиться своим опытом со всеми вами. Как человек, который любит глубоко...
Освоение Observables и Subjects в Rxjs:
Освоение Observables и Subjects в Rxjs:
Давайте начнем с основ и постепенно перейдем к более продвинутым концепциям в RxJS в Angular
1
0
22
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Разве selectedFiles!: FileList не должен быть итерируемым? Как массив? Затем цикл for (of) также следует изменить для доступа к файлу по индексу [i]. Если это объект, например карта, вы можете использовать цикл for (in) и получать элементы, используя Object.entries.

Не могли бы вы войти в консоль jobAdApplication, прежде чем опубликовать это? Мне просто любопытно, как выглядит структура данных.

Если все в порядке, перейдите к тому, как вы добавляете файлы.

Контроллер ожидает массив MultipartFile в файлах параметров.

@RequestParam("files") MultipartFile[] files

Но здесь вы добавляете их в файл с изменяющимся индексом.

 formData.append(`file${i}`, file);

Вместо этого оставьте им именованные файлы, чтобы контроллер мог получить доступ к нужным вещам.

 formData.append('files', file);

Привет, Йоосеп, я изменил selectedFiles!: any[], который, кажется, работает нормально, и formData.append('files', file) работает совершенно правильно. Звучит очевидно, но нелогично для меня с точки зрения двух экземпляров, имеющих одно и то же имя/идентификатор («файлы»). Казалось, что одно сменяет другое. Но это кажется очевидным с точки зрения сопоставления внутренних свойств, и это работает. Большое спасибо!

Murilo de Melo Reis 12.05.2022 11:06

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