Dropzone-無法設置自定義Dropzone.js選項

Question

我正在嘗試在Laravel網站上使用Dropzone.js 。

這是我的設置：

index.blade.php ：

<form action="/documents" method="POST" class="dropzone" id="my-dropzone" enctype="multipart/form-data">
  @csrf
</form>

在我的app.js文件中，我有以下代碼：

window.Dropzone = require('dropzone');

(function () {
    Dropzone.autoDiscover = false;
    Dropzone.options.myDropzone = {
        paramName: "file", // The name that will be used to transfer the file
        maxFilesize: 1, // MB
        acceptedFiles: 'image/*,application/pdf',
        parallelUploads: 8,
        addRemoveLinks: false,
        createImageThumbnails: false,
        autoProcessQueue: true,
        previewTemplate: document.getElementById('dropzone-preview-template').innerHTML,

        accept: function (file, done) {
            console.log(file.name)
        },

    };
});

實際的Dropzone元素顯示在頁面上，我可以使用它來上傳文件。 但是，我的Dropzone.options沒有得到尊重。

例如，即使我只希望能夠上傳圖像和PDF文件，我也可以上傳大於1MB的文件，可以上傳所有文件類型。

如果我移動它： Dropzone.autoDiscover = false; 在(function () {}); ，Dropzone元素根本不起作用。

我做錯了什么？

Answer 1

您已經將代碼包含在匿名函數中，但是沒有調用它，因此不會執行插件選項代碼。 刪除該匿名函數或調用它，如下所示：

(function () {

})(); // call the function

Answer 2

像這樣嘗試：

Dropzone.autoDiscover = false;

var myDropzone = new Dropzone("#dropzone", {
  paramName: "file", // The name that will be used to transfer the file
  maxFilesize: 1, // MB
  acceptedFiles: "image/*,application/pdf",
  parallelUploads: 8,
  addRemoveLinks: false,
  createImageThumbnails: false,
  autoProcessQueue: true,
  previewTemplate: document.getElementById("dropzone-preview-template")
    .innerHTML,

  accept: function(file, done) {
    console.log(file.name);
  }
});