Angular SpringBoot 多部分文件上传答案

【问题标题】：Angular SpringBoot Multipart File uploadAngular SpringBoot 多部分文件上传
【发布时间】：2018-12-10 11:22:10
【问题描述】：

我正在尝试创建一个页面，用户可以在其中发布图片及其详细信息。现在，当我从邮递员测试 Spring Boot 服务时，我成功地获取了服务中的文件。正如我试图从 angular5 做同样的事情一样，多部分文件在服务中没有得到识别，并且总是得到空数组。

 @RequestMapping(value= "/upload", method=RequestMethod.POST)
public AppResponse<User> saveUser(@RequestParam("userId") Long userId, @RequestParam("files") List<MultipartFile> files, HttpServletRequest request){
    int i=0;
    User user=userLogic.getUserById(userId);
    String[] imageUrls= new String[files.size()];
    try {
        for(MultipartFile file:files) {
            if(file.getContentType().equals("image/jpeg") || file.getContentType().equalsIgnoreCase("image/pjpeg")) {
                ObjectMetadata meta= new ObjectMetadata();
                meta.setContentType(file.getContentType());
                meta.setContentDisposition(userId+"_"+i);
                PutObjectResult result=s3Client.putObject(PHOTO_DIRECTORY,getFileName(userId, i),file.getInputStream(),meta);
                imageUrls[i]=PHOTO_DIRECTORY+"/"+getFileName(userId, i);
            } else {
                throw new InvalidFileFormatException("This filetype is not accepted");
            }

        }
        user.setActorPhotos(imageUrls);
        userLogic.saveUser(user);
        return new AppResponse<>(false, "Success");
    }
    catch(InvalidFileFormatException | IOException e) {
        System.err.println("Exception in file upload");
        return new AppResponse<>(true, "Failure");
    }

而我的角度服务代码如下

 postPhotos(files: any,userId:any): Observable<any> {
 let formData = new FormData();
 formData.append("files",files,"files");   
  return this.http.post<Result>(URLConfig.postPhotos+"?userId="+userId, formData);

}

我尝试从 Angular 添加像 multipart/form-data 这样的标题，并将其设置为未定义。无论哪种方式，我都会出错。在在这里发布之前，我已经广泛搜索了 stackoverflow，并在没有任何帮助的情况下尝试了所有这些解决方案。

提前感谢您的帮助。

【问题讨论】：

标签： angular spring-boot multipartform-data

【解决方案1】：

您需要在 headers 中将 set content type 设置为 multipart/form-data。如下修改您的服务方法并尝试一下。

 postPhotos(files: any,userId:any): Observable<any> { 
  const url = "whatever /the/ url is ";
  let headers = new HttpHeaders({
          'Content-Type':'multipart/form-data'
             });
        let options = { headers: headers };
     return this.http.post<Result>(url, formData,options);  
 }

请注意，您还需要在标头中设置响应类型（即接受）。让我们知道它是否有效。

【讨论】：

我能够在不添加标题的情况下摆脱它。但我所要做的就是使用 for 循环将表单数据中的每个文件作为单独的项目添加，而不是直接在表单数据中添加文件数组。

【解决方案2】：

postPhotos(files: any[], userId: any): Observable<any> {
    let headers = new HttpHeaders({'Content-Type':'multipart/form-data'});

    let formData = new FormData();

    files.forEach((item: any) => {
        formData.append("files", item, "files");
    });

    
    return this.http.post<Result>(url, formData, options);
}

【讨论】：