0

Пишу небольшое приложение на Spring Boot с Angular. Возникла проблема с загрузкой файлов на сервер.

На стороне клиента

Сервис:

createDocument(file: File): Observable<HttpEvent<{}>> {
    let formdata: FormData = new FormData();
    formdata.append('file', file);

    const req = new HttpRequest('POST', '/document/add', formdata, {
        reportProgress: true,
        responseType: 'text'
    });

    return this.http.request(req);
}

Компонент:

export class FormUploadComponent implements OnInit {

  selectedFiles: FileList;
  currentFileUpload: File;
  progress: { percentage: number } = { percentage: 0 }

  constructor(private documentService: DocumentService) { }

  ngOnInit() {
  }

  selectFile(event) {
    this.selectedFiles = event.target.files;
  }

  upload() {
    this.progress.percentage = 0;

    this.currentFileUpload = this.selectedFiles.item(0);
    this.documentService.createDocument(this.currentFileUpload).subscribe(event => {
      if (event.type === HttpEventType.UploadProgress) {
        this.progress.percentage = Math.round(100 * event.loaded / event.total);
      } else if (event instanceof HttpResponse) {
        console.log('File is completely uploaded!');
      }
    })

    this.selectedFiles = undefined;
  }

}

Представление:

<div  *ngIf="currentFileUpload">
   <div>{{progress.percentage}}%</div>
</div>

<label>
  <input type="file" (change)="selectFile($event)">
</label>

<button [disabled]="!selectedFiles" (click)="upload()">upload</button>

На стороне сервера

Контроллер:

@RequestMapping(value = "document/add", method = RequestMethod.POST)
@ResponseStatus(HttpStatus.CREATED)
public @ResponseBody
Document addDocument(@RequestParam("file") MultipartFile file,
                         @ModelAttribute("document") Document document) throws IOException {

    if (file != null && !file.getOriginalFilename().isEmpty()) {
        documentService.addDocument(document, file);

        if (document.getId() != 0) {
            documentService.updateDocument(document, file);
        }
    }

    return document;
}

В итоге при попытке загрузить файл получаю:

POST http://localhost:4200/document/add 404 (Not Found)

Как я понял, проблема на стороне клиента. Пока еще не силен в Angular, но проблему хочется решить сейчас. Буду рад любым советам.

3
  • 404 это не проблема на стороне клиента :) 23 окт 2018 в 19:40
  • @overthesanity , дело в том, что выдача списка файлов на страницу работает. Этот запрос, но через Postman так же. Контроллер должен принимать не только файл, но и объект, я его пока не передаю. Но до контроллера на стороне сервера дело не доходит. 23 окт 2018 в 19:46
  • @overthesanity , да, все верно, проблема заключалась в этом. Спасибо за ответ) 24 окт 2018 в 6:37

1 ответ 1

1

У вас же однозначно запущены два сервиса на разных портах, dev-server angular и бутовский, вы шлете запрос на localhost:4200, у бута дефолтный порт 8090, если вы свой не установили.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.