Question

我有以下（例如简化）角度指令，它创建了一个dropzone

directives.directive('dropzone', ['dropZoneFactory', function(dropZoneFactory){
    'use strict';
    return {
        restrict: 'C',
        link : function(scope, element, attrs){

            new Dropzone('#'+attrs.id, {url: attrs.url});

            var myDropZone = Dropzone.forElement('#'+attrs.id);


            myDropZone.on('sending', function(file, xhr, formData){
                //this gets triggered
                console.log('sending');
                formData.userName='bob';
            });
        }
    }
}]);

正如您所看到的sending事件处理程序，我正在尝试发送用户名（“bob”）以及上传的文件。但是，我似乎无法在我的路由中间件中检索它，因为req.params作为一个空数组返回（我也尝试过req.body）。

我的节点路线

    {
    path: '/uploads',
    httpMethod: 'POST',
    middleware: [express.bodyParser({ keepExtensions: true, uploadDir: 'uploads'}),function(request,response){
        // comes back as []
        console.log(request.params);

        //this sees the files fine
        console.log(request.files);

        response.end("upload complete");
    }]
}

以下是文档在sending事件

上所说的内容

在每个文件发送之前调用。获取xhr对象和formData对象作为第二个和第三个参数，以便您可以修改它们（例如添加CSRF标记）或添加其他数据。

修改

我现在放弃了程序化方法。我有两个表单提交到同一个端点，一个只有post和一个dropzone的表单。两者都有效，所以我认为这不是终点的问题，而是我如何处理'发送'事件。

//Receives the POST var just fine
form(action="http://127.0.0.1:3000/uploads", method="post", id="mydz")
    input(type="hidden", name="additionaldata", value="1")
    input(type="submit")

//With this one I can get the POST var
form(action="http://127.0.0.1:3000/uploads", method="post", id="mydz2", class="dropzone")
    input(type="hidden", name="additionaldata", value="1")

Answer 1

好的，我真的想通了，感谢Using Dropzone.js to upload after new user creation, send headers

sending事件：

        myDropZone.on('sending', function(file, xhr, formData){
            formData.append('userName', 'bob');
        });

与由于某种原因无效的formData.userName = 'bob'相反。

Answer 2

我想补充NicolasMoise的答案。作为webdev的初学者，我陷入了如何获取Dropzone实例的困境。我想检索由自动发现功能生成的Dropzone实例。但事实证明，最简单的方法是在首次告知Dropzone 不自动发现后手动添加Dropzone实例。

<input id="pathInput"/>
<div id="uploadForm" class="dropzone"/> 
<script>
  $(document).ready(function(){
    Dropzone.autoDiscover = false;
    var dZone = new Dropzone("div#uploadForm", {url: "/api/uploads"});
    dZone.on("sending", function(file, xhr, data){
      data.append("uploadFolder", $("#pathInput")[0].value);
    });
  });
</script>

Serverside数据将在request.body.uploadFolder

Answer 3

尼古拉斯回答是解决问题的唯一方法。如果您需要在发送之前更改file对象，则此功能特别有用。

另一种方法是使用params选项：

var myDropzone = new Dropzone("div#myId", 
                              { url: "/file/post", params: { 'param_1': 1 }});

比照the documention

Answer 4

对于那些使用thatisuday/ng-dropzone的人来说，回调方法是这样完成的：

    <ng-dropzone class="dropzone" options="dzOptions" callbacks="dzCallbacks" methods="dzMethods"></ng-dropzone>

在控制器中：

    $scope.dzCallbacks = {
        sending: function(file, xhr, form) {
            console.log('custom sending', arguments);
            form.append('a', 'b');
        }
    };

使用发送事件以编程方式创建Dropzone发送其他数据

4 个答案: