Как отправить данные JSON и форм-данные (файлы) из Angular в действие ASP.NET WebAPI Controller за один раз?

Question

Допустим, у меня есть контроллер ASP.NET WebAPI, который выглядит так:

public class StuffController
{
    [HttpGet]
    [Route("api/v1/stuff/{id:int}")]
    [ResponseType(typeof(Model))]
    public async Task<IHttpActionResult> GetAsync(int id)
    {
        // ...
    }

    [HttpPut]
    [Route("api/v1/stuff/{id:int}")]
    [ResponseType(typeof(IHttpActionResult))]
    public async Task<IHttpActionResult> UpdateAsync(int id, Model model)
    {
        // ...
    }

    [HttpPost]
    [Route("api/v1/stuff")]
    [ResponseType(typeof(IHttpActionResult))]
    public async Task<IHttpActionResult> CreateAsync([FromBody] Model model)
    {
        // ...
    }
}

Есть ли в любом случае, я могу отправить / загрузить / отправить из приложения Angular (очевидно, в сервисе с должным образом внедренным HttpClient) модель (которая является данными json, которые будут извлечены из тела) и данные формы, содержащие файлы. ..)

Проблема в том ... Я не понимаю, как:

const formData = new FormData();

const uploadReq = new HttpRequest('POST', url, formData, {
     reportProgress: true,
     headers: headers
});

Это как ...:

• Я добавляю данные json как часть данных формы и не могу извлечь их из тела как «такого» в действии Web API Controller, и мне нужно сохранить ключ, используемый в приложении Angular для данных json, а затем выполнить цикл поверх остальных ключей (которые предположительно являются всеми файлами).
• Я должен отправить отдельное «POST» для каждого файла

Answer 1

Отправьте многокомпонентный запрос MIME (multipart/form-data), каждый BLOB-объект является собственной записью FormData: https://developer.mozilla.org/en-US/docs/Web/API/FormData/Using_FormData_Objects - на стороне сервера вы можете извлечь различные части из запроса в ASP.NET с помощью Request.Content.ReadAsMultipartAsync API: https://docs.microsoft.com/en-us/aspnet/web-api/overview/advanced/sending-html-form-data-part-2

Вам нужно будет изменить действия контроллера, чтобы не использовать параметры метода, а непосредственно читать из Request:

public async Task<HttpResponseMessage> PostFormData()
{
    // Check if the request contains multipart/form-data.
    if( !this.Request.Content.IsMimeMultipartContent() )
    {
        throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
    }

    // Temporarily write the request to disk (if you use `MultipartMemoryStreamProvider` your risk crashing your server if a malicious user uploads a 2GB+ sized request)
    String root = this.Server.MapPath("~/App_Data");
    MultipartStreamProvider provider = new MultipartFormDataStreamProvider(root);

    try
    {
        // Read the form data and serialize it to disk for reading immediately afterwards:
        await this.Request.Content.ReadAsMultipartAsync( provider );

        // This illustrates how to get the names each part, but remember these are not necessarily files: they could be form fields, JSON blobs, etc
        foreach( MultipartFileData file in provider.FileData )
        {
            Trace.WriteLine( file.Headers.ContentDisposition.FileName );
            Trace.WriteLine( "Server file path: " + file.LocalFileName );
        }

        return this.Request.CreateResponse( HttpStatusCode.OK );
    }
    catch( System.Exception e )
    {
        return this.Request.CreateErrorResponse(HttpStatusCode.InternalServerError, e);
    }
}