从Angular客户端发送文件和其他参数并在服务器上处理它们的最佳方法

时间:2016-07-01 08:16:44

标签: javascript angularjs asp.net-web-api

我有一个使用该方法的服务,它获取三个应该发送到服务器的参数。

setMainPhotoFor: function(file, petName, petId) {
            ...
}

我有以下解决方案:

客户端

services.js

setMainPhotoFor: function(file, pet) {
            var baseServerApiUrl = configuration.ServerApi;
            var data = new FormData();

            data.append("image", file);
            data.append("petName", pet.Name);
            data.append("petId", pet.ID);

            $http.post(baseServerApiUrl + '/pictures/main-picture/add', data, {
                headers: { "Content-Type": undefined }
            });
        }

服务器端

PicturesApiController

[HttpPost]
[Route("main-picture/add")]
public async Task<HttpResponseMessage> SetMainPicture()
{
    if (!Request.Content.IsMimeMultipartContent())
    {
        return Request.CreateResponse(HttpStatusCode.BadRequest);
    }

    var provider = new MultipartMemoryStreamProvider();

    await Request.Content.ReadAsMultipartAsync(provider);

    MemoryStream mainPicture = new MemoryStream(await provider.Contents[0].ReadAsByteArrayAsync());
    string petName = await provider.Contents[1].ReadAsStringAsync();
    int petId;

    if (!int.TryParse(await provider.Contents[2].ReadAsStringAsync(), out petId))
    {
        //...
    }
    //...

但在我看来它并不好看。任何人都能为这项任务提出正确而优雅的解决方案吗?

2 个答案:

答案 0 :(得分:0)

发送带有角度添加选项的多部分表单,如下所示:

$http.post(baseServerApiUrl + '/pictures/main-picture/add', data, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        });

答案 1 :(得分:0)

我在here之前使用服务器端示例代码回答了这个问题。

基本上你应该流内容并将你的dto放在标题中。我尝试了很多方法,这是我认为最好的方法。