从 javascript/Ajax 调用 Laravel 函数 - Dropzone.js 和 Laravel

Question

您好，我有一个使用 dropzone.js 的表单，如下所示，

<form method="post" action="{{url('/example/fileupload')}}" enctype="multipart/form-data" class="dropzone" id="dropzone">

        @csrf

        <input type="submit">

    </form>  

我正在使用下面的代码来配置 dropzone.js

<script type="text/javascript">
        Dropzone.options.dropzone =
         {
            maxFilesize: 12,
            acceptedFiles: ".jpeg,.jpg,.png,.gif",
            addRemoveLinks: true,
            timeout: 5000

};
</script>

它在前端工作意味着它仅在 dropzone 视图中显示上传的图像。我想问一下如何从这里调用我的 laravel 控制器功能。该函数具有重命名图像文件并将其保存在数据库中的所有逻辑。单击提交按钮后，应调用该函数（名为 fileupload）。我已经创建了如下路线，

//just output the view with dropzone area
    Route::get('/example','exampleController@show'); 

 //fileupload function contains all the logic of renaming and saving image iles
    Route::post('/example/fileupload','exampleController@fileupload');

Answer 1

只要文件被拖放到 dropzone，Dropzone 就会自动调用您的表单操作。您不需要提交按钮即可将文件提交到服务器。您可以通过打开 Chrome 浏览器 DOM 检查器并转到网络选项卡然后将文件拖放到 dropzone 上来验证这一点，您将在网络选项卡中看到一些请求。您的表单可能如下所示。

<form method="post" action="{{url('/example/fileupload')}}" enctype="multipart/form-data" 
                  class="dropzone" id="dropzone">
    @csrf
</form>

您可以在发送到服务器之前重命名文件，但这不是必需的。

<script type="text/javascript">
        Dropzone.options.dropzone =
         {
            maxFilesize: 12,
            renameFile: function(file) {
                var dt = new Date();
                var time = dt.getTime();
               return time+file.name;
            },
            acceptedFiles: ".jpeg,.jpg,.png,.gif",
            addRemoveLinks: true,
            timeout: 5000,
            success: function(file, response) 
            {
                console.log(response);
            },
            error: function(file, response)
            {
               return false;
            }
};
</script>

在服务器端，您可以存储如下文件。

use App\ImageUpload;

public function fileupload(Request $request)
    {
        $image = $request->file('file');
        $imageName = $image->getClientOriginalName();
        $image->move(public_path('images'),$imageName);

        $imageUpload = new ImageUpload();
        $imageUpload->filename = $imageName;
        $imageUpload->save();
        return response()->json(['success'=>$imageName]);
    }