使用 Ajax 调用但不使用 Form 标签（只有 div，没有 Form 标签）使用 Dropzone.js 上传文件？

Question

我正在尝试使用 Dropzone.js 在 Laravel 8 中上传多个文件。我试图在不使用 Form 标签的情况下做到这一点。我有一个用 Dropzone.js 初始化的 div 元素。每当我单击提交按钮时，文件都不会上传。图像将从 dropzone 上传框中清除。但是，当我去查看存储文件夹时，没有上传任何文件。而且，我还在控制台中收到一个错误，上面写着“POST .......url....... 419（未知状态）”。我该如何解决？请帮忙。我正在尝试在不使用表单标签的情况下上传，因为我已经有一个表单供其他输入字段处理。我也无法弄清楚是否有任何方法可以使用多个输入字段提交我的表单，然后在其下方，使用 dropzone 上传必要的文件并使用提交按钮一次发布所有内容。请帮忙。我在任何地方都找不到这个解决方案。

    <div class="card">
            <div class="card-header">Documents Upload</div>
            <div class="card-body">
                <div class="dropzone" id="multipleFileUpload"></div>
            <hr>
            <a id="submit" role="button" class="btn btn-primary" style="width: 100%">Upload</a>
        </div>

    Dropzone.autoDiscover = false;
    $(document).ready(function(){
        var myDropzone = new Dropzone("#multipleFileUpload", 
        {
            url: '{{route("multiple.file.store")}}', 
            acceptedFiles: ".jpg,.png,.jpeg,application/pdf",
            maxFiles: 10,
            addRemoveLinks: true,
            autoProcessQueue: false,
            init: function () {
                var submitButton = document.querySelector("#submit");
                myDropzone = this;
                submitButton.addEventListener("click", function() {
                    myDropzone.processQueue(); 
                });

                this.on('complete', function(){
                    if (this.getQueuedFiles().length == 0 && this.getUploadingFiles().length == 0) {
                        var _this = this;
                        _this.removeAllFiles();
                    }
                });
            }
        });
    });

 public function storeMultipleFile(Request $request)
    {
        if ($request->hasFile('file')) {
            $image = $request->file('file');
            $imageName = time().'.'.$image->extension();
            $image -> move(public_path('images'), $imageName);
            return response()->json(['success' => $imageName]);
        }
    }

Route::any('/storeMultipleFile', [UploadsController::class, 'storeMultipleFile'])->name('multiple.file.store');

Answer 1

您应该传递 csrf 令牌来发布请求，因此您需要添加如下标头

 Dropzone.autoDiscover = false;
    $(document).ready(function(){
        var myDropzone = new Dropzone("#multipleFileUpload", 
        {
            url: '{{route("multiple.file.store")}}', 
            headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
            acceptedFiles: ".jpg,.png,.jpeg,application/pdf",
            maxFiles: 10,
            addRemoveLinks: true,
            autoProcessQueue: false,
            init: function () {
                var submitButton = document.querySelector("#submit");
                myDropzone = this;
                submitButton.addEventListener("click", function() {
                    myDropzone.processQueue(); 
                });

                this.on('complete', function(){
                    if (this.getQueuedFiles().length == 0 && this.getUploadingFiles().length == 0) {
                        var _this = this;
                        _this.removeAllFiles();
                    }
                });
            }
        });
    });

不要忘记在标题中添加元标记

<meta name="csrf-token" content="{{ csrf_token() }}">

更新

在 dropzone 初始化之前禁用自动发现

 Dropzone.autoDiscover = false;

在 dropzone div 中添加输入

<div class="dropzone" id="multipleFileUpload">
 <input name="file" type="file" multiple/>
 </div>