将 JSON 和文件数据以及从 JavaScript 发布到 MVC Web API 控制器答案

【问题标题】：Post JSON and file data and from JavaScript to MVC Web API Controller将 JSON 和文件数据以及从 JavaScript 发布到 MVC Web API 控制器
【发布时间】：2014-06-08 17:40:56
【问题描述】：

我想用 JavaScript 分块上传一个大文件 - 即使用 File API 对其进行切片，然后将切片 blob 发布到服务器。我可以这样做：

Javascript：

// file is a file from an file select input element
var data = new FormData();
data.append('Slice', file.slice(start, end));
$http.post('/api/upload', data);  //I'm using AngularJS

MVC Web API 控制器：

public async Task Post()
{
    var provider = new MultipartMemoryStreamProvider();
    await Request.Content.ReadAsMultipartAsync(provider);
    var stream = provider.Contents.First().ReadAsStreamAsync().Result;

没有文件切片，我可以轻松发布 JSON，并使用模型绑定来获取它：

Javascript：

var model = {};
model.CurrentBlock = 0;
model.FileName = file.name;
$http.post('/api/upload', model);

服务器：

public class UploadModel
{
    public string CurrentBlock { get; set; }
    public string FileName { get; set; }
}

public async Task Post(UploadModel model)
{
}

我不知道如何在单个请求中同时执行这两项操作 - 发布文件切片和一些 JSON 元数据。我似乎无法创建模型属性和 blob 数据的任何 JSON 对象，这些对象将被模型绑定的控制器方法参数的任何组合拾取。我试过这样的事情：

public async Task<UploadModel> Post(UploadModel model, HttpPostedFileBase file)

或者直接将文件blob添加到模型中：

var model = {};
model.CurrentBlock = 0;
model.FileName = file.name;
model.Payload = file.slice(start, end)
$http.post('/api/upload', model);

但它永远不会通过。我确定我错过了一些简单的东西。

【问题讨论】：

标签： javascript asp.net-mvc asp.net-mvc-5 asp.net-web-api2

【解决方案1】：

下载Fiddler 并在发帖时运行它。它将准确地向您显示发布的内容（您可能需要使用您的机器名称而不是 localhost 来打开该站点）。

您可能还需要稍微不同地传递参数：

$http.post('/api/upload?filename=' + model.name, model.PayLoad);

在服务器上，您将使用以下方式读取它：

HttpPostedFileBase request = Request.Files["Slice"];

这里是一个链接，指向如何做到这一点的更详细的示例： http://www.dotnetcurry.com/showarticle.aspx?ID=894

【讨论】：