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

Question

我想使用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)
{
}

我不知道如何在单个请求中同时完成- post文件切片和一些JSON元数据。我似乎不能创建任何模型属性的JSON对象和blob数据，这些对象将被用于模型绑定的控制器方法参数的任何组合所拾取。我试过这样的东西：

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);

但它从来没有通过。我肯定我错过了一些简单的东西。

Answer 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