asp.net mvc-发布JSON和文件数据,并从JavaScript到mvc Web API控制器

asp.net mvc - Post JSON and file data and from JavaScript to MVC Web API Controller

本文关键字:JavaScript 并从 mvc Web 控制器 API 数据 mvc- net 发布 JSON      更新时间:2023-09-26

我想用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);

但它从未实现。我肯定我错过了一些简单的东西。

下载Fiddler并在撰写文章时运行它。它将向您显示发布的确切内容(您可能需要使用您的机器名而不是localhost来打开网站)。

您可能还需要以不同的方式传递参数:

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

在服务器上,你会用类似的东西来阅读

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

以下是如何做到这一点的更详细示例的链接:http://www.dotnetcurry.com/showarticle.aspx?ID=894