使用发送事件以编程方式创建的 Dropzone 发送附加数据答案

【问题标题】：Sending additional data with programatically created Dropzone using the sending event使用发送事件以编程方式创建的 Dropzone 发送附加数据
【发布时间】：2014-03-23 10:23:29
【问题描述】：

我有以下（例如简化的）角度指令，它创建了一个 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")

【问题讨论】：

嗨，尼古拉斯。我怀疑这与您配置 Express 的方式有关。我从来没有见过这样的配置。您介意提供有关如何创建和配置路线的详细信息吗？一般我们配置路由this way
我对此表示怀疑。我已经向同一个端点发送了一个常规的 html 表单，并且一切正常，所以我认为问题在于我如何通过 Dropzone 发送数据。您有发送数据的示例吗？我也尝试过他们在FAQ 中的方式（在 html 中的 dropzone 反对以程序方式创建），但它也不起作用。
你是如何在你的 html 表单中发送你的用户名的？作为查询或表单参数？
@Feugy 看到编辑，它是一个通过 post 发送的表单参数
实际上它现在正在使用第二种形式。但是，如果我尝试以编程方式执行此操作 (myDropZone.on('sending', ...)，则它不起作用。有什么线索吗？

标签： node.js angularjs dropzone.js

【解决方案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' 不同，后者由于某种原因不起作用。

【讨论】：

【解决方案2】：

我想补充 NicolasMoise 的回答。作为 webdev 的初学者，我被困在如何获取 Dropzone 的实例上。我想检索由自动发现功能生成的 Dropzone 实例。但事实证明，最简单的方法是在首先告诉 Dropzonenot 自动发现之后手动添加 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>

服务器端数据将在request.body.uploadFolder

【讨论】：

【解决方案3】：

Nicolas 的回答是解决问题的一种可能方法。如果您需要在发送之前更改 file 对象，这将特别有用。

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

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

参见。 the documention

【讨论】：

【解决方案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');
        }
    };

【讨论】：