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

问题描述

我正在尝试从 Angular 4 前端将多个文件上传到 Spring Boot 服务器。

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

标签： angularspring-boot

您需要确保 Spring 控制器和 Angular 网页都使用相同的标题“multipart/form-data”

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

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

问题描述

解决方案

推荐阅读