README

Media manager是一个使用Vue.js 2.0编写的Laravel的基本文件上传和管理组件

对于Vue.js 1.x版本，请使用版本1.0.x

# 简介

Media Manager提供了一种简单的方法，使用户能够上传和管理在整个项目中使用的内容。

# 要求

PHP >= 7.3
Composer
现有的Laravel 5.3+项目

# 安装

要开始使用，请通过Composer包管理器安装Media Manager

composer require talvbansal/media-manager

接下来，在配置文件config/app.php的providers数组中注册Media Manager服务提供者（对于Laravel 5.5用户，由于现在它是自动发现的，因此不需要注册）

\TalvBansal\MediaManager\Providers\MediaManagerServiceProvider::class,

# 路由和中间件

Media Manager服务提供者不会自动注册Media Manager工作的路由。这是为了让您可以在这些路由周围添加自定义中间件。您可以通过将以下内容添加到您的routes/web.php文件中，来注册所有Media Manager所需的路由

\TalvBansal\MediaManager\Routes\MediaRoutes::get();

如果您希望围绕Media Manager路由添加中间件，可以使用正常的Route::group语法或使用Media Manager的配置文件。

php artisan vendor:publish --tag=media-manager

发布包的资产后，将出现一个新的配置文件，位于/config/media-manager.php。只需将所需的中间件添加到中间件数组中即可。

如果您想将路由的根前缀从/admin/更改为其他值，可以通过更改上述发布的配置文件中的media-manager.routes.prefix值来实现。但是，更改前缀值将需要您将一个新的prefix prop传递给media-manager标记，该prop直接对应于此值。

# 资产

注册Media Manager服务提供者后，应使用vendor:publish Artisan命令发布Media Manager资产

php artisan vendor:publish --tag=media-manager --force

Media Manager资产不会像通常预期的那样发布到public文件夹，而是会发布到/resources/vendor/talvbansal。由于Media Manger是用vue.js 2.0编写的，因此您需要使用webpack或另一个打包器来将代码准备好供浏览器使用。然后，您可以将这些资产与现有项目资产一起打包。

示例

首先，您需要在resources/js/app.js文件中添加media-manager引用

require('./bootstrap');

// Add this line...
require('./../vendor/talvbansal/media-manager/js/media-manager');

const app = new Vue({
    el: '#app'
});

# Laravel Mix (Laravel 5.4+)

// -- webpack.mix.js --
const { mix } = require('laravel-mix');

// Copy SVG images into the public directory...
mix.copy('resources/vendor/talvbansal/media-manager/fonts/', 'public/fonts/');

然后确保样式被捆绑，图标被复制到公共目录

// -- app.scss --
@import "../vendor/talvbansal/media-manager/css/media-manager.css";

默认情况下，media manager使用public磁盘存储其上传。默认情况下，public磁盘的存储路径为storage/app/public。要使这些文件可通过网络访问，请使用以下storage:link artisan命令生成到public/storage的符号链接

php artisan storage:link

有关public磁盘的更多信息，请参阅Laravel文档。

如果您想更改媒体管理器存储文件的磁盘，您可以在项目的 .env 文件中创建一个新的条目，名称为 MEDIA_MANAGER_STORAGE_DISK，并在 config/filesystems.php 中配置的磁盘名称。任何支持 url 方法的 flysystem 适配器都应该可以工作。

注意

一些云飞系统（如 AWS S3）支持访问模式。通过媒体管理器进行的所有文件上传默认为 public。您可以通过在环境变量 MEDIA_MANAGER_ACCESS 中指定或直接通过配置 media-manager.php（如果您的项目中已发布包的配置）来更改它。

# 入门

媒体管理器是用 Vue.js 2.x 编写的，并捆绑了快速入门所需的所有依赖项。

为了避免 CSRF 问题，如果您的布局中尚未存在，您需要添加以下内容

    <meta name="csrf-token" content="{{ csrf_token() }}">

# 媒体管理器组件

媒体管理器包将注册 2 个新的可用 vue.js 组件

<media-manager>
<media-modal>

<media-manager> 组件是核心组件，提供了媒体管理器的所有功能，而 <media-modal> 组件用于构建媒体管理器的内部模态窗口。您也可以使用 <media-modal> 组件在模态窗口内打开媒体管理器。

# 独立媒体管理器

如果您只需要一个媒体管理器实例，入门非常简单。只需在 Vue 实例的作用域内创建一个 <media-manager> 标签

<body>
    <div id="app">
        <media-manager></media-manager>
    </div>
</body>

这将创建一个媒体管理器，允许您执行以下所有操作

导航目录
上传新文件
创建新文件夹
重命名项目
移动项目
删除项目

模态窗口媒体管理器

在模态窗口中设置媒体管理器需要更多的标记和配置。

您需要执行以下操作

在 <media-modal> 组件内部创建一个 <media-manager> 组件。
将 :is-modal="true" 属性添加到媒体管理器组件： <media-manager :is-modal="true">
创建一种打开和关闭模态窗口的方法。
- 在根 Vue 实例的数据对象中创建一个布尔属性，用于保存模态窗口的可见状态，默认值为 false，showMediaManager = false。
- 向 <media-modal> 组件添加 v-if 指令，并使用新创建的 showMediaManager 属性切换模态窗口的可见性，<media-modal v-if="showMediaManager"></media-modal>。
- 创建一个按钮来打开模态窗口，并使其更改绑定到模态窗口 show 属性的属性为 true
- 向 <media-modal> 和 <media-manager> 组件添加 @media-modal-close 事件监听器，以便它们可以关闭模态窗口

以下是一个上述所有内容的示例

<body>
    <div id="app">
        <media-modal v-if="showMediaManager" @media-modal-close="showMediaManager = false">
            <media-manager
                :is-modal="true"
                @media-modal-close="showMediaManager = false"
            >
            </media-manager>
        </media-modal>
    
        <button @click="showMediaManager = true">
            Show Media Manager
        </button>
    </div>

    <script>
        new Vue({
        el: '#app',
            data: {
                showMediaManager: false,
            }
        });
    </script>
</body>

除了提供正常 <media-manager> 组件的所有功能外，当在模态窗口中显示时，还会渲染关闭窗口的按钮和 select 文件。

# 通知事件

为了使您能够利用项目现有的通知系统，媒体管理器会发出可以由名为 eventHub（如果 window.eventHub 已存在）的自动创建并添加到 window 的单独 Vue 实例监听的事件。用于通知的事件名为 media-manager-notification，其签名如下：(message, type, time)。

- message: string
- type : string
- time : int

监听器可以被添加到根 vue 实例的 created() 方法或组件中。

<script>
    new Vue({
        el: '#app',
        data:{
            //...
        },
        created: function(){
            window.eventHub.$on('media-manager-notification', function (message, type, time) {
                // Your custom notification call here...
                console.log(message);
            });
        }
    });
</script>

选中项事件

当通过在模态窗口内打开的媒体管理器实例选中项时，会发出一个新的 select 事件类型。与通知一样，select 的含义取决于应用程序的使用，甚至可能在应用程序中存在多个不同的媒体管理器使用场景。

为了处理在触发 select 事件时可能需要执行不同操作的实例，媒体管理器允许您使用 selected-event-name 属性定义一个自定义的 event 名称。

<media-modal v-if="showMediaManager" @media-modal-close="showMediaManager = false">
    <media-manager
        :is-modal="true"
        :selected-event-name="selectedEventName"
        @media-modal-close="showMediaManager = false"
    >
    </media-manager>
</media-modal>

当调用 select 时，会发出一个自定义事件，可以使用 Vue 的 events 监听器来监听。发出的事件名称由 selected-event-name 属性的值动态生成，并在前面加上 media-manager-selected- 前缀。例如，如果将 selected-event-name 属性设置为 editor，则发出的事件将是 media-manager-selected-editor，我们可以使用以下方式使用 window.eventHub 来处理该事件：

<script>
    new Vue({
        el : '#app',
        data:{
            showMediaManager: false,
            selectedEventName: 'editor'
        },

        mounted(){
            window.eventHub.$on('media-manager-selected-editor', (file) => {
                // Do something with the file info...
                console.log(file.name);
                console.log(file.mimeType);
                console.log(file.relativePath);
                console.log(file.webPath);

                // Hide the Media Manager...
                this.showMediaManager = false;
            });
        }
    })
</script>

事件名称的前缀是为了避免或减少在事件总线上的潜在事件名称冲突。

talvbansal / media-manager

维护者

详细信息