Загрузка файла не работает с использованием сгенерированного кода клиента - PullRequest
Новая
       97

Загрузка файла не работает с использованием сгенерированного кода клиента

1 голос
/ 26 января 2020

У меня есть простой input для выбора файла с локального диска: 

<input type="file" (change)="onUpload($event)" required/>

После выбора файла я хочу загрузить его на свой сервер.

Для это я использую фактически сгенерированный клиент, который предоставляет интерфейс: 

// Generated Client Code

// .. file.d.ts
export interface File {
    file?: Blob;
}

// .. rest-client.d.ts

postTrack(file, observe = 'body', reportProgress = false) {
    if (file === null || file === undefined) {
        throw new Error('Required parameter file was null or undefined when calling postTrack.');
    }
    let queryParameters = new HttpParams({ encoder: this.encoder });
    if (file !== undefined && file !== null) {
        queryParameters = queryParameters.set('file', file);
    }
    let headers = this.defaultHeaders;
    // to determine the Accept header
    const httpHeaderAccepts = [
        'multipart/form-data'
    ];
    const httpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
    if (httpHeaderAcceptSelected !== undefined) {
        headers = headers.set('Accept', httpHeaderAcceptSelected);
    }
    return this.httpClient.post(`${this.configuration.basePath}/api/tracks`, null, {
        params: queryParameters,
        withCredentials: this.configuration.withCredentials,
        headers: headers,
        observe: observe,
        reportProgress: reportProgress
    });
}

Загрузка выглядит следующим образом: 

onUpload(event) {
  this.uploadAndProgress(event.target.files);
}

uploadAndProgress(files: File[]) {

  // Method 1 - Pass file object directly
  const file = files[0];

  // Method 2 - Append file object to FormData     
  const file = new FormData();
  file.append('file', files[0]);

  this.apiGateway.postTrack(file, 'events',true)
    .subscribe((event) => {
      if (event.type === HttpEventType.UploadProgress) {
        this.percentDone = Math.round(100 * event.loaded / event.total);
      } else if (event instanceof HttpResponse) {
        this.uploadSuccess = true;
      }
    });
}

Однако, это не работает, так как URL запроса POST выглядит это: https://localhost: 8443 / api / track? file =% 5Bobject% 20Object% 5D (для метода 1 и метода 2), и я получаю этот ответ: 

{
  "timestamp": "2020-01-25T22:16:27.727+0000",
  "status": 500,
  "error": "Internal Server Error",
  "message": "Current request is not a multipart request",
  "trace": "org.springframework.web.multipart.MultipartException: Current request is not a multipart request\n...",
  "path": "/api/tracks"
}

На стороне сервера у меня есть конечная точка, которая в настоящее время отвечает за хранение этого файла в другом месте: 

@RequestMapping(value = "/tracks", method = RequestMethod.POST, consumes = {MediaType.MULTIPART_FORM_DATA_VALUE})
public @ResponseBody
String postTrack(
        @RequestParam("file") MultipartFile file,
        RedirectAttributes redirectAttributes
) {
    storageService.store(file);
    redirectAttributes.addFlashAttribute("message",
            "You successfully uploaded " + file.getOriginalFilename() + "!");

    return "redirect:/";
}

Я не совсем уверен, что именно я должен сделать, чтобы эта работа работала.

Я почти уверен, что проблема в том, что я должен отправить файл как Blob. Однако я не смог найти способ преобразовать объект File в Blob.

1 Ответ

2 голосов
/ 26 января 2020

Оказывается, проблема возникла из сгенерированного кода (см. выпуск github ).

Подводя итог:

@RequestParam пока не поддерживается, но будет начинаться со следующей версии

springdoc-openapi 1.2.29

Также обратите внимание, что consumes не поддерживается: 

@RequestMapping(value = "/tracks", method = RequestMethod.POST, consumes = {MediaType.MULTIPART_FORM_DATA_VALUE})

вместо I пришлось добавить @ApiResponse следующим образом: 

@RequestMapping(value = "/tracks", method = RequestMethod.POST, consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
@ApiResponse(description = "Successful Operation", responseCode = "200", content = @Content(mediaType = MediaType.MULTIPART_FORM_DATA_VALUE))

Сгенерированный код клиента TypeScript теперь выглядит следующим образом:

...