Angular 4-如何将文件上载到后端？

我正在尝试从angular 4前端将多个文件上载到spring引导服务器

 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);
}

我的邮递员资料：

弹簧控制器代码：

@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;
}

---

当您将文件推送到存储器时，您不发送头吗

我是这样做的：

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();
      });
  }

---

您需要确保Spring控制器和Angular网页都使用相同的标题多部分/表单数据

角度上传方法示例：

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

弹簧控制器示例：

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

---

你能分享你的邮递员申请详情吗？我已经添加了一个截图，我可以向你推荐这篇文章。我想这是一个很好很清楚的例子。是的，我知道你的意思。但这里的问题是多个文件上传部分：/@sachinthahewawasam，在这种情况下，请将您的Spring控制器代码添加到问题中。这将有助于确定问题。@sachinthahewawasam，spring错误直接告诉您它没有看到文件。邮递员隐式发送这些邮件头。在angular中，您应该显式地指定它们@VadymVL@sachinthahewawasam，尝试将consumes=multipart/form数据添加到@RequestMapping并检查上载。

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