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

Question

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

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

$    <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();
});