Dropzone.js 始终自动上传文件。无法在 dropzone #id 上设置选项 - Laravel - Voyager - Dropzone.js

Question

我想在我的 Web 应用程序中创建一个拖放区，用于上传图像并使用 ImageMagick 对其进行操作。我的拖放区总是自动上传所有图像并在拖放区中的图像预览中显示 "opject Object" 错误。服务器上的上传有效，但我想在提交按钮时将 Dropzone.options.myAwesomeDropzone 添加到我的拖放区以上传图像，因为我还想在上传时从表单发送数据。

下面是我在视图中的实现方式：

$    <div class="dropzone" id="my-awesome-dropzone">

视图中的.js（否则不起作用）

<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.4.0/dropzone.js"></script>

<script type="text/javascript">
    var baseUrl = "{{ url('/') }}";
    var token = "{{ csrf_token() }}";
    var myDropzone = new Dropzone("div#my-awesome-dropzone", {
        url: baseUrl + "/upload",
        params: {
            _token: token
        }
    });

我的控制器：

public function upload()
    {
        $input = Input::all();

        $rules = array(
            'file' => 'image|max:3000',
        );

        $validation = Validator::make($input, $rules);

        if ($validation->fails()) {
            return Response::make($validation->errors->first(), 400);
        }

        $destinationPath = 'uploads'; // upload path
        $extension = Input::file('file')->getClientOriginalExtension(); // getting file extension
        $fileName = rand(11111, 99999) . '.' . $extension; // renameing image
        $upload_success = Input::file('file')->move($destinationPath, $fileName); // uploading file to given path

        if ($upload_success) {
            return Response::json('success', 200);
        } else {
            return Response::json('error', 400);
        }


}

我希望有人能提供帮助，我在互联网上搜索了几个小时，但找不到解决我问题的方法。有数百种解决方案适用于除我以外的所有人....

此致

Answer 1

如果你看一下 dropzone 的文档，它说在配置中你必须将 prop autoProcessQueue 设置为 false 然后调用 myDropzone.processQueue()

所以尝试一下这样的外观：

var myDropzone;
var token = "{{ csrf_token() }}";
var baseUrl = "{{ url('/') }}";
$(document).ready(function(){
      myDropzone = new Dropzone("div#my-awesome-dropzone", {
      url: baseUrl + "/upload",
      params: {
         _token: token
         // other fields, here you can also pass a function and have the function return the fields
         name: $("#name").val()
      },
      autoProcessQueue:false,
   });
})

$("#yourButtonId",function(e){
   e.preventDefault();
   myDropzone.processQueue();
});

Dropzone.js 始终自动上传文件。无法在 dropzone #id 上设置选项 - Laravel - Voyager - Dropzone.js

Dropzone.js always auto uploads files. Can't set options on dropzone #id - Laravel - Voyager - Dropzone.js

javascript

laravel

dropzone.js

voyager

laravel-5.5