加载Dropzone.js与Require.js

Posted 2021-04-09

我想这是建立与骨干网和Require.JS应用程序中使用Dropzone.js，但我不知道如何实现它。

我应该使用要求（）？

什么是管理它最巧妙的方式？

编辑：

我试着使用悬浮窗，AMD模块在这样我骨干观点模块：

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>

但是什么都没有发生。

答案

我的问题是，当我把.dropzone类我的元素，它被初始化。但在我的定义（）模块，我设置的是永远不会被应用拿起选项。我使用的悬浮窗，AMD模块。我不知道发生了什么事。

**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"
    };

另一答案

我最近挣扎了同样的问题，而解决方案可能仍然是一些（与悬浮窗V5和测试的WebPack）是有用的。 悬浮窗将确定在所提供的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 = {
    // ....
};