附加的 FormData 将空值发送到 API

Question

我在我的 Angular 项目中使用 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 参数为空，而 cropped image 具有 base64 字符串值。我该如何解决？我搜索了相关问题，但没有找到任何解决方案。 A related question

Answer 1

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

您不是在等待 async fetch 在 API post

之前完成

附加的 FormData 将空值发送到 API

Appended FormData sends the null value to the API

javascript

api

typescript

angular