使用发送事件以编程方式创buildDropzone发送附加数据

我有以下（简化例如）angular度指令创build一个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

好吧，我已经想通了，感谢使用Dropzone.js上传新用户后，发送标题

sending事件：

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

与formData.userName = 'bob'相反，它不起作用。

Answer 2

我想补充一下NicolasMoise的回答。 作为webdev的初学者，我陷入了如何获取Dropzone的实例。 我想要检索由自动发现function生成的Dropzone实例。 但事实certificate，最简单的方法是在首先告诉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 }}); 

比照 文件

Answer 4

对于那些使用thatisuday / ng-dropzone的callback方法是这样做的：

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