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

Question

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

这是我在 View 中实现它的方法:

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

View 中的.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
        }
    });

我的 Controller :

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