如何在 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();
}