Angular 4 上传多个文件到Spring boot

现在很多项目都使用前后端分离来实现,前后端通过ajax, restful的httpclient来调用,传输数据,以下是angular上传文件到后端JAVA的例子。

	<div>
		<label for="file">Upload file</label>
		<input id="file" #file type="file" multiple (change)="upload(file)" />
		<span *ngIf="uploadProgress > 0 && uploadProgress < 100">
			{{uploadProgress}}%
		</span>
	</div>

Typescript代码 

  upload(file: HTMLInputElement) {
    const token = localStorage.getItem('token');
    let headers: HttpHeaders = new HttpHeaders();
    headers = headers
    .set('Cache-Control', 'no-cache')
    .set('Authorization', 'Bearer ' + token);
    if (file.value.length === 0) {
      return;
    }
    const files: FileList = file.files
    const fileLength = files.length;
    const formData: FormData = new FormData();
    for (let index = 0; index < fileLength; index++) {
      const singleFile = files.item(index);
      // files 这个名字和spring mvc controller参数的名字要对应
      formData.append('files', singleFile);
    }
    // for (let singleFile of files.item) {
    //   formData.append(singleFile.name, singleFile);
    // }
    // formData.append('file', file.files[0]);

    const url = 'http://localhost:8764/api/v1/user/fileUpload';
    const req = new HttpRequest('POST', url, formData, {
        reportProgress: true, headers: headers
    });

    this.http.request(req).subscribe(event => {
        if (event.type === HttpEventType.UploadProgress) {
          this.uploadProgress = Math.round(100 * event.loaded / event.total);
        } else if (event instanceof HttpResponse) {
          console.log('Files uploaded!');
        }
    });
    // this.http.post(url, formData, {headers: headers}).subscribe(data => {
    //   console.log(data);
    // });
  }

 Spring boot controller

    @PostMapping(value = "fileUpload")
    public ResponseEntity<ResponseMap> fileUpload(@RequestPart List<MultipartFile> files) {
        if (!CollectionUtils.isEmpty(files)) {
            files.stream().forEach(file -> {
                LOGGER.info(file.getOriginalFilename());
                LOGGER.info(String.valueOf(file.getSize()));
            });
        }
        ResponseEntity<ResponseMap> responseEntity = null;
        ResponseMap responseMap = new ResponseMap();
        responseEntity = new ResponseEntity(responseMap, HttpStatus.OK);
        return responseEntity;
    }

 Controller参数用@RequestParam应该也可以

猜你喜欢

转载自gwj41.iteye.com/blog/2399535
今日推荐