附加的FormData将空值发送给API

Question

在上传之前，我已经在我的角度项目中使用了ngx-image-cropper来剪切图像。component.ts的一些相关部分如下：

croppedImage: any = '';
imageCropped(event: ImageCroppedEvent) {
  this.croppedImage = event.base64;
}
Base64ToFile(url: any, filename: any, mimeType: any){
    return (fetch(url)
            .then(function(res){return res.arrayBuffer();})
            .then(function(buf){return new File([buf], filename,{type:mimeType});})
        );
  }

 OnSubmit() {
    const filedata = new FormData();
    this.Base64ToFile(this.croppedImage, "myphoto.png", "image/png").then(function(outputFile){
      
      console.log(outputFile);
      filedata.append("file", outputFile, outputFile.name);//The first parameter "file" is the input parameter in API method
    });
    this.http.post('https://localhost:5001/api/featuredpost/postimage/' + this.selectedPostId, filedata).subscribe(
      response => {
        console.log(response);
      }
    );
  }

API操作：

public async Task<IActionResult> PostImage([FromForm] IFormFile file, [FromRoute] int id){
    ...
}

问题是，当我调试API时，输入的file参数为null，而cropped image有一个base64字符串值。我怎么才能修好它？我寻找相关的问题，但没有找到任何解决我的案件。A related question

Answer 1

this.http.post需要在this.Base64ToFile(..)调用的.then(...)中

您没有等待async fetch在API post之前完成