Angular 4 - Как загрузить файлы на сервер?

Question

Я пытаюсь загрузить несколько файлов на сервер пружинной загрузки с внешнего 4-го углового интерфейса.

 selectedFile : File []  = [];
  filesToUpload: File[] = [];
  selectedFileNames: string[] = [];

  readURL(fileInput) {
    // this.detectFiles(fileInput);
    this.filesToUpload = <Array<File>>fileInput.target.files;
    for (let i = 0; i < this.filesToUpload.length; i++)
    {
        this.selectedFile.push(fileInput.target.files[i]);
    }
    console.log(this.selectedFile)
}

onUpload2(){
    const fd = new FormData();
    for (var i = 0; i < this.filesToUpload.length; i++){
      fd.append('fileseee',this.selectedFile[i],this.selectedFile[i].name);
    }

    this.questionService.uploadImages(fd).
    subscribe( 
      (data: any) => {
           }
         )
   }



uploadImages(fda){
  console.log(fda);
  return this.http.post(this.apiUrl+"/imageUpload112",fda)
  .map((res : Response) => res);
}

Код загрузочной пружины внутреннего интерфейса прекрасно работает с почтальоном.Отображается сообщение об ошибке:

Request processing failed; nested exception is
[org.springframework.web.multipart.MultipartException: Current request is not a multipart request] with root cause

Мои данные почтальона:

код контроллера пружины:

@SuppressWarnings("deprecation")
@RequestMapping(method = RequestMethod.POST, value = "/imageUpload112")
public String uploadFile(@RequestParam("fileseee")MultipartFile[] fileStream)
        throws IOException, ServletException {

    String bucketName = "mcqimages";
    String status = "";
    String url = "";

    for (int i = 0; i < fileStream.length; i++) {
        MultipartFile file = fileStream[i];

        try {
            checkFileExtension(file.getName());
            DateTimeFormatter dtf = DateTimeFormat.forPattern("-YYYY-MM-dd-HHmmssSSS");
            DateTime dt = DateTime.now(DateTimeZone.UTC);
            String dtString = dt.toString(dtf);
            String fileName = file.getOriginalFilename();

            BlobInfo blobInfo =
                    storage.create(
                            BlobInfo
                                    .newBuilder(bucketName, fileName)
                                    .setAcl(new ArrayList<>(Arrays.asList(Acl.of(User.ofAllUsers(), Role.READER))))
                                    .build(),
                            file.getInputStream()
                    );

            System.out.println(blobInfo.getMediaLink());
         // status = status + "You successfully uploaded file=" + file.getOriginalFilename();
            url= url+ blobInfo.getMediaLink() + ",";

        } catch (Exception e) {
            status = status + "Failed to upload " + file.getOriginalFilename() + " " + e.getMessage();
        }
    }
    return url;
}

Answer 1

Необходимо убедиться, что и Spring-контроллер, и веб-страница Angular используют одни и те же заголовки "multipart / form-data"

Пример метода угловой загрузки:

return this.http.post(`/file`, formData, {
  headers: {
    'enctype': 'multipart/form-data; boundary=request-boundary',
    'Accept': 'application/json'
  }
});

ПримерSpring Controller:

@PostMapping(path = "/file", consumes = "multipart/form-data")
public ImageResponse uploadImageFile(@RequestParam("imageFile") MultipartFile[] imagefiles) {
    return imageService.saveImageFiles(imagefiles);
}

Answer 2

Когда вы отправляете файл в хранилище, вы не отправляете заголовки?

Я делаю это, используя это:

pushFileToStorage(file: File) {
    const body: FormData = new FormData();
    body.append('file', file);
    const headers = new Headers({
      'X-Requested-With': 'XMLHttpRequest'
    });

    return this.http.post(this.urlEndpoint, body, { headers })
      .map(respuesta => {
        console.log(respuesta.json());
        return respuesta.json();
      });
  }