使用angular 4和spring框架上传文件答案

【问题标题】：File upload with angular 4 and spring framework使用angular 4和spring框架上传文件
【发布时间】：2018-04-07 20:17:41
【问题描述】：

我正在尝试使用 angular 4 和 spring 框架进行文件上传，我已经实现了以下代码，但它不起作用。

角度组件.ts

 upload() {
    let inputEl: HTMLInputElement = this.inputEl.nativeElement;
    let fileCount: number = inputEl.files.length;
    let formData = new FormData();
    if (fileCount > 0) { 
        for (let i = 0; i < fileCount; i++) {
            formData.append('file[]', inputEl.files.item(i));

 }

       console.log(fileCount);// print count of files correctly 

    this.http.post("/filestorage/api/upload", formData) 
                     .map(res => res.json()) 
                     .subscribe();
    }
}

弹簧控制器

@PostMapping("/upload")
@Timed
public void upload(@RequestParam(value="file", required=false)
        MultipartFile file) throws IOException {

        System.out.println(file); //get null value
  }

【问题讨论】：

npmjs.com/package/angular4-files-upload看看
您是否尝试将值重命名为“file[]”，因为那是 FormData 对象中的字段名称（问题出在哪里/不起作用？）

标签： spring angular file-upload

【解决方案1】：

我已将 MultipartFile 更改为 MultipartHttpServletRequest 并进行了必要的更改，现在可以正常工作了。

@PostMapping("/upload")
@Time
public void upload(MultipartHttpServletRequest request) throws IOException {

    Iterator<String> itr = request.getFileNames();
    MultipartFile multipart = request.getFile(itr.next());
    java.io.File convFile = new java.io.File( multipart.getOriginalFilename());
        convFile.createNewFile(); 
        FileOutputStream fos = new FileOutputStream(convFile); 
        fos.write(multipart.getBytes());
        fos.close();
}

【讨论】：

【解决方案2】：

在您的上传功能中，尝试将标头添加到您的请求中，例如：

upload() {
   let inputEl: HTMLInputElement = this.inputEl.nativeElement;
   let fileCount: number = inputEl.files.length;
   let formData = new FormData();
   if (fileCount > 0) { 
       for (let i = 0; i < fileCount; i++) {
           formData.append('file[]', inputEl.files.item(i));
       }
       console.log(fileCount);// print count of files correctly 

       let headers = new Headers();// import { Headers,BaseRequestOptions } from '@angular/http';
       headers.append('enctype','multipart/form-data');
       headers.append('Accept', 'application/json');
       let options = new BaseRequestOptions();
       options.headers = headers;   

       this.http.post("/filestorage/api/upload", formData , options) 
                    .map(res => res.json()) 
                    .subscribe();
   }
}

使用 Angular 4 测试。

【讨论】：