README

Laravel 媒体管理器

• 为了即时优化上传的文件，尝试使用 spatie

安装

• composer require alvazz/media-manager

• (Laravel < 5.5) 将服务提供者添加到 config/app.php

  'providers' => [
      alvazz\MediaManager\MediaManagerServiceProvider::class,
  ]

• 使用以下命令发布包资源

  php artisan vendor:publish --provider="alvazz\MediaManager\MediaManagerServiceProvider"

• 安装后，包将自动添加

  • 包路由到 routes/web.php
  • 包资源编译到 webpack.mix.js

• 安装依赖

  yarn add vue vue-ls vue-async-computed vue-list-rendered vue-image-compare2 vue-tippy@v1 vue2-filters vue-input-autowidth vue-notif vue-clipboard2 vue-awesome@v2 vue-touch@next idb-keyval axios dropzone cropperjs keycode date-fns lottie-web plyr fuse.js
  # or
  npm install vue vue-ls vue-async-computed vue-list-rendered vue-image-compare2 vue-tippy@v1 vue2-filters vue-input-autowidth vue-notif vue-clipboard2 vue-awesome@v2 vue-touch@next idb-keyval axios dropzone cropperjs keycode date-fns lottie-web plyr fuse.js --save

• 将以下单行命令添加到您的主js文件中，然后运行 npm run watch 以编译您的 js/css 文件。

  • 如果您遇到问题 检查。

  // app.js
  
  window.Vue = require('vue')
  
  // pre Laravel v5.7
  require('../vendor/MediaManager/js/manager')
  // Laravel v5.7
  // require('../assets/vendor/MediaManager/js/manager')
  
  new Vue({
      el: '#app'
  })

功能

• 图像编辑器

• 多

  • 上传
  • 移动/复制
  • 删除

• 通过以下方式上传：

  • 使用上传面板
  • 拖放到任何位置
  • 在空白区域 "项目容器" 上单击并按住

• 在上传文件时切换 random/original 名称

• 从URL上传图像

• 按需加载图像

• 缓存请求

• 异步更新

• 批量选择

• 更改项目/的可见性

• 在导航时更新页面URL

• 显示音频文件信息 "艺术家，专辑，年份等..."

• 动态隐藏 文件 / 文件夹

• 限制对路径的访问

• 下载所选 "包括批量选择"

• 直接复制所选文件链接

• 使用管理器 + 从模态窗口 + 与任何 wysiwyg 编辑器

• 使用 "左，上，右，下，主页，结束" 自动滚动到所选项目

• 锁定/解锁 项目/。

• 在当前文件夹 或 整个集合中全局搜索。

• 按以下方式筛选：

  • 文件夹
  • 图像
  • 音频
  • 视频
  • 文本/pdf
  • 应用程序/存档
  • 已锁定项目
  • 所选项目

• 按以下方式排序：

  • 名称 "默认值"
  • 大小
  • 最后修改时间

• 项目数量：

  • 所有
  • 所选
  • 搜索发现

• 内容比例条

• 防止（文件/文件夹）覆盖的保护

• 对以下进行文件名清理：

  • 上传
  • 重命名
  • 新建文件夹

• 自动播放媒体文件 "如果选择的筛选器是音频/视频"

• 根据使用情况禁用/启用按钮，以避免噪音并保持用户专注

• 快捷键/手势

  • 如果没有更多的 行 可用，则按 下 将转到列表中的最后一个项目 "类似于本机查找器"。
  • 在预览卡中查看 audio/video 文件时，按 空格 将 播放/暂停 项目，而不是关闭模态窗口。
  • 双击/轻触
    • 当侧边栏隐藏时，任何类型为音频/视频的文件将打开在预览卡片中，与图像相同。
    • 任何类型为应用/归档的文件将下载。
  • 所有的左右手势也有对应的操作。
  • 在使用图像编辑器时按下esc键不会关闭模态窗口，但您可以双击/轻触模态窗口的背景来关闭它。"以避免意外取消您的更改"。

  * 信息侧边栏仅在大于"1087px"的大屏幕上可用。
  * 为了停止干扰其他keydown事件，您可以通过以下方式切换管理器监听器：
  EventHub.fire('disable-global-keys', true/false).

  
  

• 事件

配置

config/mediaManager.php

return [
    /*
     * ignore files pattern
     */
    'ignore_files' => '/^\..*/',

    /*
     * filesystem disk
     */
    'storage_disk' => 'public',

    /*
     * manager controller
     */
    'controller' => '\alvazz\MediaManager\Controllers\MediaController',

    /*
     * remove any file special chars except
     */
    'allowed_fileNames_chars' => '.\_\-\'\s\(\)\,',

    /*
     * remove any folder special chars except (_ -)
     */
    'allowed_folderNames_chars' => '\_\-',

    /*
     * disallow uploading files with the following mimetypes
     * https://www.iana.org/assignments/media-types/media-types.xhtml
     */
    'unallowed_mimes' => ['php', 'java'],

    /*
     * extra mime-types
     */
    'extended_mimes' => [
        'image' => [
            'binary/octet-stream',
        ],
        'archive' => [
            'application/x-tar',
            'application/zip',
        ],
    ],

    /*
     * when file names gets cleand up
     */
    'sanitized_text' => 'uniqid',

    /*
     * display file last modification time as
     * http://carbon.nesbot.com/docs/#api-formatting
     */
    'last_modified_format' => 'toDateString',

    /**
     * hide file extension in files list
     */
    'hide_files_ext' => true,

    /*
     * load image preview only when item is clicked ?
     */
    'lazy_load_image_on_click' => false,

    /*
     * automatically invalidate cache after "in Minutes"
     */
    'cache_expires_after' => 60,

    /*
     * in-order to get the folder items count & size
     * we need to recursively get all the files inside the folders
     * which could make the request take longer
     */
    'get_folder_info' => true,

    /**
     * do you want to enable broadcasting the changes
     * made by one user to others ?
     *
     * "laravel-echo" must be installed
     */
    'enable_broadcasting' => false,

    /**
     * show "an itunes like" content ratio bar
     */
    'show_ratio_bar' => true
];

用法

维基
演示

• 访问 localhost:8000/media