首页 > 解决方案 > 到达 API 核心 3.1 时,formData 始终为空

问题描述

尝试使用 FormData 将图像上传到我的后端。使用我的角度代码时,我的 API 中的文件始终为空。

创建表单数据:

upload() {
    let formData = new FormData();
    formData.append('upload', this.editedImage);
    console.log("editedImage: " + this.editedImage);
    console.log("formdata: " + formData);

    this.imageService.create(formData).subscribe(response => {
      let temp = response;
      console.log(temp);
    })
}

进行邮局呼叫的服务:

create(formData: FormData): Observable<any> {
    console.log("formdata in service: " + formData.get('upload'));
    return this.http.post<any>(`${this.url}`, formData).pipe(
        tap(data => console.log('Image verstuurd: ' + data)),
        catchError(this.handleError)
    );
}

接收它的 API:

[HttpPost]
async public Task<ActionResult> Save([FromForm]IFormFile file)
{
    // Get reference to blob
    var uniqueName = $@"{Guid.NewGuid()}-{file.FileName}";
    CloudBlockBlob blockBlob = _blobContainer.GetBlockBlobReference(uniqueName);

    using var ms = new MemoryStream();
    file.CopyTo(ms);
    var stream = ms.ToArray();

    await blockBlob.UploadFromByteArrayAsync(stream, 0, stream.Length);

    return Json(new
    {
        name = blockBlob.Name,
        uri = blockBlob.Uri
    });
}

它在我使用 Postman 上传图像时有效,而不是在使用角度代码时。

编辑:

正确答案在这里找到: https ://stackoverflow.com/a/35325907/7128762

问题基本上是我需要在我的控制器中为我的 IFormFile 提供正确的名称。

标签: c#angular.net-core

解决方案


[FromForm] 将尝试为它接收的表单数据构建一个引用类型,因此您的 FormFile 需要在您定义的引用类型内。

使用以下内容设置您的模型:

public class YourDataModel 
{
   public IFormFile File { get; set; }
   // whatever other properties you need
}

在您的 API 控制器中尝试这样的操作:

[HttpPost]
async public Task<ActionResult> Save([FromForm]YourDataModel file)
{
   // your logic
}

推荐阅读