Dropzone，Angular，MVC5 实现

Question

Link 到空降区：https://github.com/enyo/dropzone

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

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

我想要 post 文件以及其他值，例如操作，以及一个名为 "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
            }
        })
    }

控制中(angular)

$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 未捕获类型错误：非法调用

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

Angular 服务

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

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

Dropzone，Angular，MVC5 实现

Dropzone, Angular, MVC5 Implementation

javascript

asp.net-mvc

angularjs

dropzone.js