使用Require.js加载Dropzone.js

Question

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

我应该使用require()吗？

最熟练的管理方式是什么？ 编辑： 我尝试在我的一个Backbone视图模块中使用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>

但是什么也没有发生。

- Ladislav M

---

你在项目的其余部分中使用requirejs吗？“最熟练”的说法并不存在。这总是取决于你的项目设置方式。如果你确实想要使用require，dropzone似乎支持它。 - Dogoku

查看当前正在编辑的问题。 - Ladislav M

仍然完全不工作...请帮帮我，有人可以帮忙吗？ - Ladislav M

似乎它只在Chrome稳定版中无法正常工作。 - Ladislav M

Answer 1

关于@romaricdrigon的出色回答，我想进行快速跟进。

import * as Dropzone from 'dropzone';

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

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

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

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

因此，如果您想在生产中使用dropzone(<=5.72)和es6，这就是您应该使用的代码行。

import * as Dropzone from "dropzone/dist/min/dropzone.min.js";

- Christoph Hansen

Answer 2

我的问题是，当我在元素上放置.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"
    };

- Marques Woodson

Answer 3

最近我一直在苦恼同样的问题，解决方案仍然可能对某些人有用（已测试使用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 = {
    // ....
};

- romaricdrigon