无效的dropzone元素

如何解决无效的dropzone元素

此应用程序是在Laravel 7中构建的，我将JavaScript与webpack一起使用。当我尝试创建新的Dropzone元素时，出现以下错误： Uncaught Error: Invalid dropzone element. 。这是我的JavaScript代码：

window.Dropzone = require('dropzone/dist/dropzone.js');
Dropzone.autoDiscover = false;
$(function () {
  if (document.getElementById('pdfDropzone')) {
    var myDropzone = new Dropzone("div#pdfDropzone",{ url: "/success" });
    Dropzone.options.pdfDropzone = {
      paramName: "file",// The name that will be used to transfer the file
      maxFilesize: 2,// MB
      acceptedFiles: ".pdf",//
      accept: function (file,done) {
        done();
      }
    };
    $("#pdfButton").click(function (e) {
      e.preventDefault();
      myDropzone.processQueue();
    });
  }
});

这是HTML：

            <form action="/success" id="pdfDropzone" method="post" enctype="multipart/form-data" class="dropzone pdf-drop row align-content-center">
                @csrf
                <button class="dz-button col-2" id="pdfButton">
                    <i class="far fa-file-alt"></i><br>
                    PDF
                </button>
                <div class="dz-message col-8 align-self-center">Drag PDF file here or click to browse </div>
                <div class="fallback">
                    <input name="file" type="file" />
                </div>
            </form>

如何清除此错误？

解决方法

我通过创建2种新表单来解决此问题：

<div>
<form action="/pdf_upload" enctype="multipart/form-data" method="post" id="pdfDropzone" class="uploadzone pdf-drop row align-content-center">
@csrf
<!-- Dropzone pdf-->
<button class="dz-button col-2">
<i class="far fa-file-alt"></i><br>
PDF
</button>
<div class="dz-message col-8 align-self-center">Drag PDF file here or click to browse </div>
<div class="fallback">
<input name="pdf_file" type="file" />
</div>
</form>
<!-- End Dropzone -->
<!-- Dropzone tumbnail-->
<form action="/image_upload" enctype="multipart/form-data" method="post" id="imgDropzone" class="uploadzone img-drop col justify-content-center">
@csrf
<button class="dz-button">
<i class="far fa-file-alt"></i><br>
jpg,png,jpeg
</button>
<div class="dz-message align-self-center">Drag image file here or<br>click to browse</div>
<div class="fallback">
<input name="image_file" type="file" />
</div>
</form>
<!-- End Dropzone -->
</div>

然后在app.js中我添加了此内容：

require('dropzone');

$(function () {
    Dropzone.autoDiscover = false;
    var dropzoneOptionsPdf = {
        paramName: "file",maxFilesize: 20,// MB
        addRemoveLinks: true,acceptedFiles: "application/pdf",init: function () {
            this.on("maxfilesexceeded",function (file) {
                this.removeFile(file);
            });
        }
    };
    var dropzoneOptionsImage = {
        paramName: "file",acceptedFiles: "image/*",init: function () {
            this.on("success",function (file) {
                console.log("success > " + file.name);
            });
        }
    };
    var pdfDropzone = new Dropzone("#pdfDropzone",dropzoneOptionsPdf);
    var imgDropzone = new Dropzone("#imgDropzone",dropzoneOptionsImage);
});

我希望这对遇到相同问题的人有所帮助！