Angular 四 上传多个文件到Spring boot
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应该也可以