HttpPostedFileBase 为 null - 将文件从 AngularJS 发布到 MVC

Question

类似的问题已经问了很多次了，但是没有明确的答案，我的还是有点问题。

这是C#中的模型

public class SubmitModel
{
    public string Name { get; set; }
    public HttpPostedFileBase File { get; set; }
    public IEnumerable<HttpPostedFileBase> Files { get; set; }
}

这是 MVC 代码

[HttpPost]
public ActionResult Test(SubmitModel model)
{
    // Here model.File and model.Files is always null
}

这是我使用AngularJS

提交的

var data = {
    name: scope.name,     // This is passed to MVC successfully
    file: scope.files[0], // Doesn't even work with single file
    files: scope.files    // This is a FileList
};
$http.post("/umbraco/surface/MyController/Test", data).success(...);

如果你想知道我是怎么赋值的scope.files:

$('#upload').on('change', function (e) {
    scope.$apply(function () {
        scope.files = e.target.files;
    });
});

有人能看出我遗漏了什么吗？

Answer 1

解决了！

应该这样提交

var data = new FormData();
angular.forEach(scope.item, function (value, key) {
    if (key == "files") {
        for (var i = 0; i < value.length; i++) {
            data.append(value[i].name, value[i]); // Filename:File
        }
    } else {
        data.append(key, value);
    }
});

$http.post("/umbraco/surface/MyController/Test", data, {
                transformRequest: angular.identity,
                headers: { 'Content-Type': undefined }
            }).success(...);

然后在 MVC 中，我们从 Request.Files 获取文件，它不会在模型中。

[HttpPost]
public ActionResult Test(SubmitModel model)
{
    var files = Request.Files;  // a collection of HttpPostedFileBase
    Save(model, files);
}

更多信息：
https://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs
http://www.codeproject.com/Tips/878730/File-Upload-Using-AngularJS-and-ASP-NET-MVC

HttpPostedFileBase 为 null - 将文件从 AngularJS 发布到 MVC

HttpPostedFileBase is null - Posting files from AngularJS to MVC

model-view-controller

file-upload

httppostedfilebase

angularjs