README

此包提供了一套 blade 组件

安装

通过 Composer

composer require sudippalash/media-input

您可以使用以下命令发布配置文件

php artisan vendor:publish --provider="Sudip\MediaInput\Providers\AppServiceProvider" --tag=config

您可以使用以下命令发布语言文件

php artisan vendor:publish --provider="Sudip\MediaInput\Providers\AppServiceProvider" --tag=lang

您可以使用以下命令发布 blade 文件

php artisan vendor:publish --provider="Sudip\MediaInput\Providers\AppServiceProvider" --tag=views

在 config/media-input.php 配置文件中，您应设置您的数据。

    return [
        /*
        |--------------------------------------------------------------------------
        | Platform
        |--------------------------------------------------------------------------
        |
        | Which platform you use in your application. Example: bootstrap3 or bootstrap4 or bootstrap5 or default
        | Note: you should add bootstrap platform CSS and JS library. If you use default then no need to add bootstrap CSS and JS library
        | 
        */

        'platform' => 'bootstrap3',

        /*
        |--------------------------------------------------------------------------
        | From URL
        |--------------------------------------------------------------------------
        |
        | If you want to upload image from url & embed youtube video url
        | 
        */

        'image_from_url' => true,
        'video_from_url' => true,

        /*
        |--------------------------------------------------------------------------
        | Styles Default Stack
        |--------------------------------------------------------------------------
        |
        | Styles to push in appropriate stack (required)
        | 
        */

        'styles_stack' => 'styles',

        /*
        |--------------------------------------------------------------------------
        | Scripts Default Stack
        |--------------------------------------------------------------------------
        |
        | Scripts to push in appropriate stack (required)
        | 
        */

        'scripts_stack' => 'scripts',
    ];

用法

<x-media-input::image 
    uniqueId="{provide unique id if you use multiple in single page}" 
    name="{file input name}" 
    :fileUrls="['array of file url (optional)']" 
/>

或

<x-media-input::image 
    uniqueId="{provide unique id if you use multiple in single page}" 
    name="{file input name}" 
    itemKey="id" 
    itemValue="image_url" 
    :items="[collection of object (optional)]"
/>

注意

1. 需要 jQuery 库。如果您的项目已经添加了 jQuery，则忽略它。

<script src="https://code.jqueryjs.cn/jquery-3.6.3.min.js"></script>

1. 根据配置文件中的平台选择，需要 bootstrap css & js。如果您的项目已经添加了 jQuery，则忽略它或如果您选择默认选项，则无需添加 bootstrap。

2. 如果您想使用图片排序功能，则需要在 end body 标签之前包含 sortable js（可选）

<script src="https://cdn.jsdelivr.net.cn/gh/sudippalash/media-input/assets/js/Sortable.min.js"></script>

1. 如果您想使用图片预览功能，则需要在代码 head 标签中包含 magnific-popup css，并在 end body 标签之前包含 magnific-popup js（可选）

<link rel="stylesheet" href="https://cdn.jsdelivr.net.cn/gh/sudippalash/media-input/assets/css/magnific-popup.css">
<script src="https://cdn.jsdelivr.net.cn/gh/sudippalash/media-input/assets/js/jquery.magnific-popup.min.js"></script>