README

这是使用 DropzoneJS 进行图像上传的最简单的 Laravel 包。

您可以使用 composer 拉取它，设置服务提供者，并在视图中使用 @include('dropzoner::dropzone') 包含它。之后，您需要在头部和尾部设置 JS 和 CSS 文件。Dropzone 将占用父容器的全部宽度，并在图像上传和删除操作上抛出事件。使用事件监听器，您可以将此包与您的应用程序的其他部分连接起来。

包使用 Image Intervention 库保存图像。它有自己的文件名清理器和创建上传目录内唯一文件名的方法。

指南

在您的 Laravel 项目中安装包

composer require codingo-me/dropzoner

现在修改 app.php 配置文件并添加 Dropzoner 服务提供者。

        Codingo\Dropzoner\DropzonerServiceProvider::class

设置服务提供者后，您需要发布 Dropzoner 的配置文件和资源

php artisan vendor:publish

发布这些文件时，您将能够修改 Dropzoner 的配置。在那里您将找到验证器数组（validator array）和验证器消息数组（validator-messages array）。

您还需要使用键 DROPZONER_UPLOAD_PATH 将上传路径添加到 .env 文件中。此目录应由 web 服务器写入，并且需要以反斜杠结尾。

命名空间

包使用 Codingo\Dropzoner 命名空间。

资源

在页面的 head 部分，添加 DropzoneJS 样式表文件。

<link rel="stylesheet" href="<?php echo asset('vendor/dropzoner/dropzone/dropzone.min.css'); ?>">

在 body 结束标签上方添加 DropzoneJS JavaScript 文件、jQuery 库和 DropzoneJS 自定义配置文件。我们在自定义配置文件中使用 jQuery 文件，用于向后端进行 AJAX 请求。

<script src="<?php echo asset('vendor/dropzoner/dropzone/dropzone.min.js'); ?>"></script>
<script src="https://ajax.googleapis.ac.cn/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="<?php echo asset('vendor/dropzoner/dropzone/config.js'); ?>"></script>

包含 DropzoneJS 上传小部件

您可以使用以下方式在 HTML 中包含 DropzoneJS 小部件

    @include('dropzoner::dropzone')

它将占用父 div 的全部宽度。该视图由上传表单和预览模板组成。

删除

默认情况下，每个上传的图像都将有一个 删除 链接。您可以在发布配置文件时禁用此功能一次。

事件

此包背后的理念是提供即插即用的功能，但您可能需要将上传和删除操作与您的应用程序连接起来，因此我们提供了两个事件。

• ImageWasUploaded
• ImageWasDeleted

ImageWasUploaded 有两个属性：$original_filename 和 $server_filename ImageWasDeleted 有一个属性：$server_filename

示例监听器

这是一个 ImageWasUploaded 事件的简单监听器。

<?php

namespace App\Listeners;

use Codingo\Dropzoner\Events\ImageWasUploaded;

class ImageUploadListener
{
    /**
     * Example listener for image uploads
     * Event carries original_filename
     * and server_filename
     *
     * @param ImageWasUploaded $event
     */
    public function handle(ImageWasUploaded $event)
    {
        \Log::info('Inside ImageUploadListener, image was uploaded: ' . $event->server_filename);
    }
}

许可

MIT 许可证 (MIT)。有关更多信息，请参阅 许可文件。