atriatech/media

在您的laravel项目中探索、上传、删除和创建新文件夹


README

Media - Explore, Upload, Delete and Create new folder

媒体 - 探索、上传、删除和创建新文件夹

您可以使用此包上传媒体并将媒体附加到您的模型。

安装

  1. composer require atriatech/media.
  2. Atriatech\Media\MediaServiceProvider::class 添加到 config/app.php 文件中的 providers 数组。
  3. 'AtriatechMedia' => Atriatech\Media\Facades\AtriatechMedia::class 添加到 config/app.php 文件中的 aliases 数组。
  4. "Atriatech\\Media\\": "vendor/atriatech/media/src/" 添加到 composer.json 文件中的 autoload => psr-4 对象,然后运行以下命令: composer dump-autoload
  5. 如果您尚未链接存储,请运行此命令 php artisan storage:link
  6. 运行 php artisan vendor:publish --tag=atriatech-media-config 将配置文件复制到 config 文件夹。
  7. 运行 php artisan vendor:publish --tag=atriatech-media-public 将资产文件复制到 public 文件夹,建议使用 --force 标志。
  8. 运行 php artisan vendor:publish --tag=atriatech-media-migrations 将迁移复制到 database/migrations 文件夹。
  9. 运行 php artisan migrate 创建表。

API

您可以在您的模型上使用这些方法

有一个用于单个媒体的 getSubSize 方法,您可以使用以下代码获取您在配置文件中定义的特定子尺寸(subSize)的图像

$medium->getSubSize('thumbnail');

用法

首先,查看 config 文件夹中的 atriatech_media.php 文件。

AtriatechMedia 添加到您的模型

use Atriatech\Media\AtriatechMedia;

class Product extends Model
{
    ...
    use AtriatechMedia;
    ...
}

在您的视图中,您必须加载css和js文件并加载媒体选择器

示例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Atriatech Media</title>
    <!-- load the css file -->
    @atriatech_media('css')
</head>
<body>
<form method="post">
    @csrf
    <!-- load the media selector -->
    @atriatech_media_start
        @atriatech_media_file('img', '{"name": "image", "placeholder": "Image", "file": ""}')
    @atriatech_media_end
    <!-- load the media selector -->
    <br>
    <button type="submit">Submit</button>
</form>

<!-- load the js files -->
@atriatech_media('js')
</body>
</html>

@atriatech_media_file 指令有两个参数

  1. ID - 用于媒体选择器
  2. OPTIONS - 包含这些键的JSON对象
{
    "name": "(String)", // the key which you can get in $request object when the form submitted
    "placeholder": "(String)", // placeholder for the media selector
    "file": "(String)", // Current media path to show in media selector
    "id": "(Number)" // Current media id
}

从控制器上传

要从控制器上传文件,只需使用 AtriatechMedia 门面。

use Atriatech\Media\Facades\AtriatechMedia;

class HomeController
{
    function index()
    {
        $file = $request->file('file');
        AtriatechMedia::upload($file, 'path'); // path is optional
    }
}

用JS加载

如果您想用javascript加载选择器,请使用以下指令

将此指令添加到媒体选择器blade指令的内部或外部。

@atriatech_media_start
<div id="mp3"></div>
@atriatech_media_end

<!-- OR -->

<div id="mp3"></div>

然后使用此代码加载选择器

AtriatechMedia.loadMediaSelectorWithJS('mp3', {name: 'mp3', placeholder: 'MP3', accept: '.mp3'});

loadMediaSelectorWithJS 方法的参数与 @atriatech_media_file 指令完全相同。它只有一个第三个参数,获取 truefalse。如果您想在媒体选择器blade指令外添加 div 元素,则应传递 false

集成

CKEditor

在您的视图中添加一个textarea

<textarea name="editor1"></textarea>

使用媒体作为CKEditor文件浏览器

CKEDITOR.replace( 'editor1', {
    filebrowserBrowseUrl: mediaRoute('atriatech.media.index'),
    filebrowserImageBrowseUrl: mediaRoute('atriatech.media.index') + '?accept={{ config('atriatech_media.mime_types.image/*') }}',
});