Angular 4 upload multiple files to Spring boot

Many projects now use front-end and back-end separation to achieve. Front-end and back-end are called through ajax, restful httpclient to transmit data. The following is an example of angular uploading files to back-end 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 code 

  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);
      // The name of files corresponds to the name of the spring mvc controller parameter
      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 parameters should also work with @RequestParam

 

 

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=326428229&siteId=291194637