Question

我想截取屏幕截图并将其上传到服务器（我使用spring-boot），为此，我使用了本机库屏幕截图及其角度服务来获取图像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();
        }
    }

}

使用的角度代码：

  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);

Ionic 4将屏幕快照上传到服务器

1 个答案: