如何在 Angular POST 正文中包含 FormData 以从 ASP.NET Core 后端检索它作为 IFormFile

Question

我需要通过 POST 请求从 Angular 的前端发送一个文件（图像）以及更多参数到我的 ASP.NET Core 后端，以将文件上传到服务器。 问题是我要么根据我指定的标头收到 HTTP 500 错误，要么最常见的是后端将 FormData 作为空对象接收。

在 Angular 中，我首先将收到的 Base64 图像转换为 Blob，然后转换为 File 来构造 FormData（这是 ngx-compress-image 包在压缩图像时返回的内容。也许还有更好的方法可以做到这一点？ ）。 然后我分配标头并发送 POST 请求：

export class RestApiService {
    token: string = 'The session token';
    userID: string = 'The user ID';

    UploadImage(picAsBase64: string) {
        let blob = new Blob([picAsBase64], { type: 'image/png' });
        let file = new File([blob], Math.random().toString(36).substr(2, 5));

        let formData: FormData = new FormData();
        formData.append('pfile', file);

        const headers = new HttpHeaders({
          'Content-Type': 'multipart/form-data',
          'Accept': 'application/json'
        });


        let options = { headers: headers };

        let body = {
          'paramh': this.token,
          'pfile': formData,
          'pkuserid': this.userID
        }

        return this.http.post('api/UploadFiles/UploadFiles/', body, options).pipe(map(data => { return data; }));
    }
}

后端：

[Route("api/[controller]")]
public class UploadFilesController : Controller
{
    [HttpPost("UploadFiles")]
    public async Task<IActionResult> UploadFiles([FromBody]JObject data)
    {
        string paramh = data["paramh"].ToString();
        IFormFile pfile = data["pfile"].ToObject<IFormFile>();
        string pkuserid = data["pkuserid"].ToString();

            ...
    }
}

---

编辑好的，所以我应用了托尼的解决方案，但一开始没有用。 经过一些测试，我找到了将 IFormFile 变量声明为 Nishant 建议的 List 并使用 [FromForm] 声明每个参数的解决方案，如下所示：

public async Task<IActionResult> UploadFiles([FromForm]string paramh, [FromForm] string pkuserid, [FromForm]List<IFormFile> pfiles)

但是我仍然有一个问题，因为事实证明我的 IFormFile 有 ContentType: application/octet-stream 我不知道这是否是通常的，我必须将它从后端转换为某些图像内容类型或类似的东西，或者如果它应该像我在创建文件之前在 Angular Blob 中声明的那样作为图像/png 来自 POST 请求。

变量截图

再次感谢大家，希望你们仍然可以帮助我解决最后一个问题。

Answer 1

您也必须像这样为您的对象使用 FormData

    let formData: FormData = new FormData();
    formData.append('pfile', file);
    formData.append('paramh', this.token);
    formData.append('pkuserid', this.userID);
    return this.http.post('api/UploadFiles/UploadFiles/', formData, options).pipe(map(data => { return data; }));

您还必须在控制器中使用 [FromForm]

 public async Task<IActionResult> UploadFiles([FromForm]JObject data)

Answer 2

两个网址都不匹配。

Answer 3

我已经使用 IFormFile 接口完成了

字符串 emailModel 是将被反序列化的模型

附件列表的 IFormFile 文件列表

[HttpPost]
public async Task<IActionResult> SendEmailAsync(string emailModel, List<IFormFile> files)
{
    EmailModel emailModel = JsonConvert.DeserializeObject<EmailModelWith>(emailModel);
    List<Attachment> attachments = new List<Attachment>();
    foreach (var file in files)
    {
         Attachment attachment = new Attachment(file.OpenReadStream(), file.FileName, file.ContentType);
         attachments.Add(attachment);
    }
    return Ok();
}