javascript - Ionic 4 上传截图到服务器

Question

我想截图并上传到服务器(我使用spring-boot)，为此我使用原生库截图和它的 Angular 服务来获取图像URI，我转换了图像URI 到一个 blob，我使用 FORMDATA 发送它并发布 HTTPCLIENT 请求，问题出在后台，我没有找到名为文件的参数。拜托，任何人都可以帮助我吗？

注意:我使用 MULTIPARTFILE 作为 webservice 参数类型和 REQUESTPARAM 注释。

这里是java代码:

    @PostMapping(value = { "/uploadImg/{idColis}" })
public void uploadScreenShot(@RequestParam("file") MultipartFile file, @PathVariable String idColis) {
    if (file != null) {
        try {
            fileService.importerImage(file);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

}

使用的 Angular 代码:

  call(colis : any){
this.screenshot.URI(80).then(img => {
  this.screenShotsuccess = 'screened';
  this.colisService.upload(img,colis).subscribe(res=>{
    this.screenShotsuccess = 'screened and uploaded';
  });
}, err => {
  this.screenShotsuccess = err ;
} );}

upload(imgData : any,colis :any){

// Replace extension according to your media type
const imageName = colis.codeEnvoi+ '.jpg';
// call method that creates a blob from dataUri
const imageBlob = this.dataURItoBlob(imgData.URI);
const imageFile = new File([imageBlob], imageName, { type: 'image/jpeg' })

let  postData = new FormData();
postData.append('file', imageFile);

let data:Observable<any> = this.httpClient.post(this.wsListeUploadImage+colis.codeEnvoi,postData);
return data;}

  dataURItoBlob(dataURI) {
console.log(dataURI);
const byteString = window.atob(dataURI.split(',')[1]);
const arrayBuffer = new ArrayBuffer(byteString.length);
const int8Array = new Uint8Array(arrayBuffer);
for (let i = 0; i < byteString.length; i++) {
  int8Array[i] = byteString.charCodeAt(i);
 }
const blob = new Blob([int8Array], { type: 'image/jpeg' });    return blob;}

这是我得到的错误:

2019-12-29 08:21:07.276  WARN 5356 --- [nio-8080-exec-7] .w.s.m.s.DefaultHandlerExceptionResolver : Resolved [org.springframework.web.multipart.support.MissingServletRequestPartException: Required request part 'file' is not present]

Answer 1

在您的 Angular 代码中，您正确地创建了 FormData，但您从未使用过它:

let data:Observable<any> = this.httpClient.post(this.wsListeUploadImage+colis.codeEnvoi,{'file':imageFile});

改成

let data:Observable<any> = this.httpClient.post(this.wsListeUploadImage+colis.codeEnvoi, postData);