Angular 7 отправляет несколько файлов на сервер - PullRequest
Новая
       2

Angular 7 отправляет несколько файлов на сервер

2 голосов
/ 29 октября 2019

У меня есть вопрос об отправке коллекции File из приложения Angular 7 на сервер .NET Core 3.

У меня есть функциональный код для отправки одного File на сервер. Но я столкнулся с проблемой при попытке отправить коллекцию File - File[]. Это действие контроллера: 

[HttpPost]
public async Task<IActionResult> Upload([FromForm(Name = "files")] List<IFormFile> files)
{
      // implementation...
{

Я отправляю FormData в соответствии с кодом, который я использовал для отправки одного файла на сервер: 

const formData = new FormData();
formData.append('files', this.files);

, что приводит к ошибке скомпилятор (см. скриншот):

enter image description here

FormData не может иметь дело с коллекцией File[].

Если бы я былизмените тот же код для обработки одного отдельного файла, например, выбрав первый элемент в коллекции, файл будет успешно отправлен на сервер. Например: 

const formData = new FormData();
formData.append('files', this.files[0]);

Запрос отправляется так: 

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Disposition' : 'multipart/form-data' }),
};

  postPhotos(model: FormData): Observable<any | ErrorReportViewModel> {
    return this.http.post('api/Photograph', model, httpOptions)
    .pipe(
      catchError(error => this.httpErrorHandlerService.handleHttpError(error)));
  }

Я также пытался отправить файлы в теле запроса с моделью. Это не работает: сервер получает Null коллекцию IFormFile. Мои исследования показывают, что отправка FormData - это путь. Но FormData, похоже, не принимает коллекцию файлов.

Как я могу отправить коллекцию файлов на сервер?

1 Ответ

2 голосов
/ 30 октября 2019

Вам просто нужно вызывать метод добавления несколько раз: 

const formData = new FormData();
this.files.forEach((file) => { formData.append('files[]', file); });

Если ключ должен быть 'files[]' или может быть просто 'files', это зависит от серверной платформы, которая анализирует тело.

...