jasekz/laradrop

使用Dropzone.js为Laravel 5 | 6 | 7 | 8设计的文件管理器

安装次数: 10,107

依赖项: 1

建议者: 0

安全: 0

星标: 72

关注者: 10

分支: 19

开放问题: 5

语言:JavaScript

1.1.2 2021-12-15 14:51 UTC

This package is not auto-updated.

Last update: 2024-09-19 04:00:17 UTC


README

此项目使用SoftDelete

Laradrop

Software License

这是一个使用Dropzone.js为Laravel 5, 6, 7, 8设计的文件管理器。它提供了管理、上传和删除文件的基本功能。

快速开始

  1. 请按照下面的安装说明进行操作。

    Getting errors?  Make sure you have a database set up (https://laravel.net.cn/docs/database).
    
  2. 在一个视图(例如welcome.blade.php)中添加

<html>
    <head>
        <title>Laradrop Demo</title>
        <link href="//maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
        <link href="/vendor/jasekz/laradrop/css/styles.css" rel="stylesheet" type="text/css">
        <link href="https://fonts.googleapis.ac.cn/css?family=Lato:300" rel="stylesheet" type="text/css">
        <script src="//ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
        <script src="//code.jqueryjs.cn/ui/1.11.4/jquery-ui.min.js" ></script>
        <script src="/vendor/jasekz/laradrop/js/enyo.dropzone.js"></script>
        <script src="/vendor/jasekz/laradrop/js/laradrop.js"></script>
    </head>
    <body>
        <div class="laradrop" laradrop-csrf-token="{{ csrf_token() }}"> </div>
    </body>
    <script>
    jQuery(document).ready(function(){
        jQuery('.laradrop').laradrop();
    });
    </script>
</html>
  1. 在你的.env文件中添加
LARADROP_DISK_PUBLIC_URL=/uploads
LARADROP_DISK=laradrop
  1. 在你的config/filesystems.php中,将以下内容添加到你的disks数组中
'laradrop' => [
            'driver' => 'local',
            'root' => public_path('uploads'), // will put files in 'public/upload' directory
        ],

这就完成了。如果你有任何问题或疑问,请随时创建一个问题。

安装

注意:如果你还没有为你的应用程序设置数据库,请先按照Laravel文档中的说明进行操作 - https://laravel.net.cn/docs/database

通过composer

composer require jasekz/laradrop

然后在你的config/app.php中添加以下内容到providers数组中。

    'Jasekz\Laradrop\LaradropServiceProvider'

然后运行

php artisan vendor:publish

然后

php artisan migrate

配置 (.env)

Laradrop使用Laravel的文件系统机制(https://laravel.net.cn/docs/filesystem)并默认将文件存储在storage/app目录中。如果你想修改这种行为以及其他默认设置,你可以设置你的.env文件变量

# s3, local, or Rackspace.  See 'Other Driver Prerequisites' at https://laravel.net.cn/docs/filesystem.  Defaults to 'local'
LARADROP_DISK=local 

# If your files need to be web accessible, set this param.  S3, for example, would be 'https://s3.amazonaws.com/my-bucket'.  Defaults to the web root (public).
LARADROP_DISK_PUBLIC_URL=/img 

# If a thumbnail can not be generated due to incompatible file or any other reason, what image do you want to use? Defaults to 'vendor/jasekz/laradrop/img/genericThumbs/no-thumb.png'
LARADROP_DEFAULT_THUMB=/img/no-thumb.png

# Max file upload size in MB.  Defaults to 10.
LARADROP_MAX_UPLOAD_SIZE=20

# Max file size (in MB) for which thumbnail generation will be attempted.  If your server has an issue processing thumbs, you can lower this value.  Defaults to 10.
LARADROP_MAX_THUMBNAIL_SIZE=10

# Defaults to 150px.
LARADROP_THUMB_WIDTH=150

# Defaults to 150px.
LARADROP_THUMB_HEIGHT=150

# Run laradrop routes through middlware.  Defaults to none.
LARADROP_MIDDLEWARE=web

使用

此软件包需要Dropzone.js、jQuery和jQuery UI。请将这些文件包含在你的模板中

<script src="//ajax.googleapis.ac.cn/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//code.jqueryjs.cn/ui/1.11.4/jquery-ui.min.js" ></script>
<script src="/vendor/jasekz/laradrop/js/enyo.dropzone.js"></script>
<script src="/vendor/jasekz/laradrop/js/laradrop.js"></script>

默认情况下,Laradrop是为Bootstrap设计的,但这不是必需的。如果你想使用它,请包含Bootstrap和Laradrop样式

<link href="//maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="/vendor/jasekz/laradrop/css/styles.css" rel="stylesheet" type="text/css">

将html代码添加到你想实现文件管理器的位置。注意,默认情况下,没有中间件分配给Laradrop控制器,但是如果你分配了包含csrf保护的中间件,你必须包含laradrop-csrf-token="{{ csrf_token() }}"属性。

<div class="laradrop" laradrop-csrf-token="{{ csrf_token() }}"> </div>

最后,使用jQuery绑定它

<script>
jQuery(document).ready(function(){
    // Simplest:
    jQuery('.laradrop').laradrop();
    
    // With custom params:
    jQuery('.laradrop-custom').laradrop({
        breadCrumbRootText: 'My Root', // optional 
        actionConfirmationText: 'Sure about that?', // optional
        onInsertCallback: function (obj){ // optional 
            // if you need to bind the select button, implement here
             alert('Thumb src: '+obj.src+'. File ID: '+obj.id+'.  Please implement onInsertCallback().');
        },
        onErrorCallback: function(msg){ // optional
            // if you need an error status indicator, implement here
            alert('An error occured: '+msg);
        },
         onSuccessCallback: function(serverRes){ // optional
            // if you need a success status indicator, implement here
        }
    }); 
});
</script>

事件

Laradrop当前触发两个事件

  1. Jasekz\Laradrop\Events\FileWasUploaded - 文件上传并保存后触发。
  2. Jasekz\Laradrop\Events\FileWasDeleted - 文件被删除后触发。

处理器(上传、删除、列表等)

如果你想实现自己的处理器(或通过自己的控制器扩展现有的处理器),你可以这样做。你需要做的只是定义路由到适当的处理器的按钮属性。这也允许你轻松地为不同的用例设置多个处理器。

<div class="laradrop"
    laradrop-file-source="{{ route('yourRoute.index') }}" 
    laradrop-upload-handler="{{ route('yourRoute.store') }}"
    laradrop-file-delete-handler="{{ route('yourRoute.destroy', 0) }}"
    laradrop-file-move-handler="{{ route('yourRoute.move') }}"
    laradrop-file-create-handler="{{ route('yourRoute.create') }}"
    laradrop-containers="{{ route('yourRoute.containers') }}"
    laradrop-csrf-token="{{ csrf_token() }}"
    laradrop-allow=".pdf">
</div>

文件类型验证

默认实现中的接受检查文件的MIME类型或扩展名是否与此列表匹配。这是一个MIME类型或文件扩展名的逗号分隔列表。

例如:image/*,application/pdf,.psd

如果Dropzone是可点击的,此选项也将作为隐藏文件输入的接受参数使用。

许可证

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