Dropzone、Angular、MVC5 实现答案

【问题标题】：Dropzone, Angular, MVC5 ImplementationDropzone、Angular、MVC5 实现
【发布时间】：2016-05-31 14:39:36
【问题描述】：

我正在尝试使用 dropzone 作为我的文件上传处理程序，使用 angularjs 和 MVC5。

问题是我似乎无法让 Http 帖子从 angularjs 服务转到 MVC 5 后端。

我想将文件连同其他值（如操作）和一个名为“values”的字符串值一起发布

下面是代码（服务中，angularjs）

  sendProductFiles: function (act, file, val) {
        return $http.post('/attributes/uploads', $.param({
            action: act,
            files: file,
            values: val
        }), 
        {
            transformRequest: angular.identity,
            headers: {
                'Content-Type': undefined
            }
        })
    }

控制中（角度）

$scope.intakeUpload = function (files) {
    var fd = new FormData();
    for (var i = 0; i < files.length; i++)
        fd.append('file', files[i]);


    AttributionViewService.sendProductFiles("addAttr", fd, $scope.selectedValues).then(function (res) {

    }, function (err) {

    });
}
  Dropzone.options.myAwesomeDropzone = {

    autoProcessQueue: false,
    uploadMultiple: true,
    parallelUploads: 100,
    maxFiles: 100,

    // Dropzone settings
    init: function () {
        var myDropzone = this;

        this.element.querySelector("button[type=submit]").addEventListener("click", function (e) {
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();
        });
        this.on("sendingmultiple", function (files) {
            $scope.intakeUpload(files);
        });
        this.on("addedfile", function (file) {
            file.previewElement.addEventListener("click", function () { this.removeFile(file); });
        });
    }

}

在 MVC 5 控件中

 [HttpPost]
    [Route("attributes/uploads")]
    public ActionResult AcceptUploads(string action, HttpPostedFile[] files, string values)
    {
        if (files.Length <= 0)
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        foreach (var file in files)
        {
            System.Diagnostics.Debug.WriteLine(file.FileName);
        }
        System.Diagnostics.Debug.WriteLine(values); 
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }

在当前状态下，我收到一个 jquery 错误 jquery.js:8458 Uncaught TypeError: Illegal invocation

编辑，还尝试了以下方法：

角度服务

 sendProductFiles: function (act, file, val) {
        return $http.post('/attributes/uploads', $.param({
            action: act,
            files: file,
            values: val
        }), {
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        })

【问题讨论】：

标签： javascript angularjs asp.net-mvc dropzone.js

【解决方案1】：

修好了！

 $scope.intakeUpload = function (files) {
    var fd = new FormData();
    for (var i = 0; i < files.length; i++)
        fd.append('files', files[i]);

    fd.append("action", "addAttr");
    fd.append("values", $scope.selectedValues);
    AttributionViewService.sendProductFiles(fd).then(function (res) {

    }, function (err) {

    });
}


 [HttpPost]
    [Route("attributes/uploads")]
    public ActionResult AcceptUploads(string action, IEnumerable<HttpPostedFileBase> files, string values)
    {
        if (files.Count() <= 0)
            return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
        foreach (var file in files) 
        {
            System.Diagnostics.Debug.WriteLine(file.FileName);
        }
        System.Diagnostics.Debug.WriteLine(values); 
        return new HttpStatusCodeResult(HttpStatusCode.BadRequest);
    }

【讨论】：