5

我想在使用Backbone 和Require.JS构建的应用程序中使用 Dropzone.js，但我不知道如何实现它。

我应该使用require()吗？

最巧妙的管理方法是什么？

编辑：

我已经尝试在我的主干视图模块中使用 dropzone-amd-module，如下所示：

define([
  'jquery',
  'underscore',
  'backbone',
  'dropzone'
  ], function($, _, Backbone, Dropzone){

var NewProduct = Backbone.View.extend({
  el: $('.products'),
  render: function(){

      $(this).empty();
      require(['text!templates/product_new.html'], function(product_new){
        var product_new = _.template(product_new);
        $('.products').html(product_new);
      }); 

      Dropzone.forElement("#my-awesome-dropzone").on("addedfile", function(file) {
        console.log("uploaded");
      });

    }
  });

return NewProduct;
});

在模板中使用此 HTML：

<form action="/upload'" class="dropzone" id="my-awesome-dropzone" method="POST" enctype="multipart/form-data">
    <input type="file" name="file" />
  </form>

但是什么也没发生。

4

3 回答 3

1

只需快速跟进@romaricdrigon 很好的答案。

import * as Dropzone from 'dropzone';

将导入 dropzone.js（未缩小版本）。我们可以从 package.json 文件中清楚地看到这一点。

"license": "MIT",
  "main": "./dist/dropzone.js",
  "maintainers": [
    {
      "name": "Matias Meno",

理想情况下，我们希望“主要”字段看起来像这样：

"main": "./dist/min/dropzone.min.js",

因此，如果您想在生产环境中使用 dropzone(<=5.72) 和 es6，那么您应该使用这条线。

import * as Dropzone from "dropzone/dist/min/dropzone.min.js";
于 2020-08-08T23:08:03.243 回答
0

我的问题是，当我将 .dropzone 类放在我的元素上时，它被初始化了。但是在我的 define() 模块中，我设置了应用程序永远不会选择的选项。我正在使用 dropzone-amd-module。我不确定发生了什么事。

**HTML**
<form action="/vendor/uploadProductImage" class="dropzone" id="product-image-drop">
    <div class="dz-default dz-message"></div>
<input type="hidden" name="productId" value=${productInstance.id}>
</form>



**JS**
Dropzone.options.productImageDrop = {
        url : '/vendor/uploadProductImage',
        paramName: "file", // The name that will be used to transfer the file
        maxFilesize: 5, // MB
        acceptedFiles: ".jpg, .png, .jpeg",
        createImageThumbnails: true,
        maxThumbnailFilesize: 15, // MB,
        thumbnailWidth: "50px",
        thumbnailHeight: "50px"
    };
于 2014-02-22T16:45:18.140 回答
0

我最近一直在努力解决同样的问题，并且该解决方案可能对某些人仍然有用（使用 Dropzone v5 和 webpack 测试）。
Dropzone 将在提供的 amd 模块的开头定义空选项（全局变量），因此诀窍是从模块中导入所有全局变量，然后重新定义选项。

在代码中：

import * as Dropzone from 'dropzone';

// If you want to disable autodiscover, do:
//Dropzone.autoDiscover = false;

// Or if you want to configure a specific form, just replace formId below with your form ID:
Dropzone.options.formId = {
    // ....
};
于 2019-02-06T11:20:22.867 回答