README

Imageable 包允许快速、轻松地为任何模型启用图片上传。上传文件、处理它们并将其保存到指定的存储由 Imageable 处理。此外，每张图片都可以关联一些描述字段。

API

Imageable 包使用 API 下载、处理和保存文件。因此，该包要正常工作需要认证。默认情况下，使用 basic 无状态认证来通过测试并快速开始使用。

变更

Tailwindcss 是 Imageable 的默认选择，就像在 Laravel 中一样。由于 css、js、views 资源在安装包后发布，因此可以更改模板和自定义界面元素。

使用限制

页面只能放置一个 <x-imageable-upload /> 组件。

安装

composer require sergmoro1/laravel-imageable

运行迁移

php artisan migrate

发布资源

php artisan vendor:publish --provider="Sergmoro1\Imageable\ImageableServiceProvider"

使用方法

为了实现图片上传功能，请将 HasStorage、HasImages 特性添加到模型中。

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Sergmoro1\Imageable\Traits\HasStorage;
use Sergmoro1\Imageable\Traits\HasImages;

class Post extends Model
{
    use HasFactory, HasStorage, HasImages;

将上传组件插入到视图中。

<x-imageable-upload :model="$post" :limit=1/>

请注意，该组件使用模型的一个实例，因此它必须在模板中可用。

limit 参数定义了模型可以上传的图片数量。默认值为 0，表示可以上传任意数量的图片。

如果页面已经连接了必要的 css 和 js 文件，并且这通常在您已经为其他模型连接 Imageable 时发生，那么您就可以上传图片。

JS 库和插件

在 package.json 文件的 dependencies 部分添加两行

  "sortablejs": "^1.15.1"

然后在控制台运行

npm update

CSS

在文件 resources/css/app.css 中，在以下行之后

@tailwind base;
@tailwind components;
@tailwind utilities;

添加一行

@import "./imageable/upload.css";

如果需要，您可以在 resources/css/imageable/upload.css 文件中对类定义进行调整，因为这是一个类似包文件的副本。

JS

要上传图片和处理与图片相关的其他字段，请向 app.js 中添加两行。

require('./imageable/axiosUpload.js');
require('./imageable/imageLine.js');

如果您想要为特定模型上传多个文件，您可以添加一个图像排序插件 Sortable。这在您想要在前端更改图像输出顺序或使用第一张图像作为主图像时非常重要。排序是通过拖放鼠标完成的。在 app.js 中为图像排序添加一行。

require('./imageable/sortable.js');

CSS 位置

Imageable 包使用 Google Material Icons，因此您需要将图标连接到页面。例如，在 views/layouts/app.blade.php 中。

  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link href="{{ url('css/app.css') }}" rel="stylesheet">

JS 位置

由于 Imageable 包使用 API 上传文件，因此需要认证。默认情况下，该包使用 basic 无状态认证来运行测试并快速开始使用该包。在页面中放置 app_credentials 变量。凭证接收方式由您决定。

  <script>var app_credentials = '<?= config('app.credentials.basic') ?>';</script>
  {{ $scripts }}
  <script src="/js/app.js"></script>

最后

在项目目录中运行

npm run dev

配置

可以更改存储参数、与上传文件关联的行视图、附加参数的数量和值。

模型

默认情况下，存储图片的参数已设置

'disk' => 'public',
'path' => '',
'seperatly' => true,

空的 path 参数表示将在选定的磁盘上创建以模型名称命名的子目录。例如，storage/app/public/post。将 separately 参数设置为 true 表示将为每个模型创建单独的目录，并以模型的 Id 作为名称。例如，storage/app/public/post/1。可以根据 Laravel 文件存储的原则使用 Sergmoro1\Imageable\Traits\HasStorage 类的 setStorage 方法更改存储参数。

只有 caption 字段被设置为每个图像的附加字段。也可以使用 Sergmoro1\Imageable\Traits\HasImages 类的 setAddonDefaults() 方法重新定义字段列表、它们的顺序和默认值。

必须在相应模型的构造函数中调用这两种方法。例如，定义字段

class Post extends Model
{
    use HasFactory, HasStorage, HasImages;
    
    public function __construct(array $attributes = []) {
        parent::__construct($attributes);
        $this->setAddonsDefaults([
            'year' => '',
            'category' => 'home',
            'caption' => '',
        ]);
    }

视图

安装和发布包后，组件文件将被复制到 resources\views\vendor\imageable 目录，您可以在该目录中自由编辑 HTML 标记，更改样式，添加/删除字段以描述每个上传的图像。

附加字段

要更改上传图像的附加字段列表，您需要编辑模型中提到的 addonDefaults 变量的默认值，并在 vendor\imageable\line\fields.blade.php 视图中定义附加 HTML 标记。包中给出了包含可能字段及其值的示例，在文件 fiealds-example.blade.php 中。

如果附加字段列表在各个模型中不同，那么 line\fields.blade.php 文件的内容应不同，因此文件名也应不同。模型变量 $addonFieldsView 用于指定文件名。名称可以是任何东西，例如

class Post extends Model
{
    use HasFactory, HasStorage, HasImages;

    protected $addonFieldsView = 'post-fields';

您需要将文件 vendor\imageable\line\fields.blade.php 复制到文件 vendor\imageable\line\post-fields.blade.php 并进行更改。

测试

composer test