Skip to main content

图片上传

图片和文件上传

媒体类型​

media_type:string 是系统内针对上传来源的一个设定。必须指定 media_type 。

但是大多数情况下你无需关注这个参数。

以下是系统保留类型，请勿重复定义。

page,
article,
media,
setting,
editor,
operate,
user,
upload,

定义媒体类型的方法是在 config/suda_custom.php 中新增，具体可参考基础配置部分的说明。

设置图片上传​

MediaBoxTrait 简介​

内置函数方法

trait MediaBoxTrait
{
    public $user;  //必须在控制器定义
    public $guard=''; //必须在控制器定义
    public $media_guards=[]; //guard数组
    public $media_type; //必须定义
    public $only_user = false; //只读取某个用户的数据
    public $media_users = [];  //只读取某个用户的数据
    public $resize = true;  // 是否生成缩略图
    public $ratio = false;  // 是否缩放
    public $hidden = '0';   //是否隐藏

    public function mediaSetting($guard='',$media_type='',$only_user=false,$resize=true,$ratio=false)
    public function loadModal(Request $request, string $media_type='default'): View
    public function uploadMedia(Request $request,$media_type="default")
    public function showMedia(Request $request,$id)
    public function removeMedia(Request $request,$media_type="default")
}

配置控制器​

参考下面代码，最简单的配置只需要配置 guard 即可

系统会自动读取 Auth::guard($this->guard)->user() 获取用户并赋值 $this->user

<?php
namespace Gtd\Suda\Http\Controllers\Admin\Media;

use Gtd\Suda\Http\Controllers\Admin\DashboardController;

use Gtd\Suda\Traits\MediaBoxTrait;

class MediasController extends DashboardController
{
    use MediaBoxTrait;
    
    public function mediaSetting()
    {
        $this->guard = 'operate';
    }

}

配置路由​

这个路由配置必须。

可以对比控制器的配置，所有函数方法都在 MediaBoxTrait 定义好了，所以路由调用的函数方法名称不能修改。

// 图片选择窗口
Route::get('medias/load-modal/{media_type}', ‘MediasController@loadModal');
Route::get('medias/modal/{media_type}', ‘MediasController@modal');

// 上传
Route::post('medias/upload/image/{media_type?}', ‘MediasController@uploadMedia');
// 删除
Route::post('medias/remove/image/{media_type?}', ‘MediasController@removeMedia');

view 调用​

引入上传组件

<div class="row mb-3">             
    <label for="image" class="col-sm-2 col-form-label text-end">
        图片上传
    </label>

    <div class="col-sm-4">
        @uploadBox(['media@logo',1,1,$media])
        <span class="help-block">360*120 pixel</span>
    </div>
</div>

uploadBox 参数说明

参数1: 媒体类型，如果没有特殊定义，默认使用 media 即可
参数2: 最大上传数量
参数3: 组件内每行显示数量
参数4: 媒体数据 类型是 \Gtd\Suda\Models\Media, 支持不传或者null

使用案例如下：

@uploadBox('media',1,1)

// 常用用法，提交到控制器的数据字段为 $request->images['logo']
@uploadBox('media@logo',1,1)

// 自定义媒体类型 page
@uploadBox('page',2,2)

JS参数​

最后一步，上传组件的核心参数，图片弹窗的链接、上传链接等。参考如下：

@push('scripts')
<script type="text/javascript">
    $(document).ready(function(){
        $.mediabox({
            box_url: "{{ admin_url('medias/load-modal/') }}",
            modal_url: "{{ admin_url('medias/modal/') }}",
            upload_url: "{{ admin_url('medias/upload/image/') }}",
            remove_url: "{{ admin_url('medias/remove/image/') }}"
        });
    });
</script>
@endpush

这里配置的参数地址，就是路由配置定义的四个地址。

总结​

图片上传功能的配置结构，目标是要不仅支持后台默认的图片上传功能，还要支持在不同功能模块和不同用户权限下的使用，这是此功能被复用的一种实现方案。