simditor 上传图片 php,Laravel-admin 集成 simditor

laravel5.5

laravel-admin 1.5.*

simditor 3.0.9

1. 创建Field扩展

namespace App\Admin\Extensions;

use Encore\Admin\Form\Field;

class Simditor extends Field

{

protected $view = 'admin.simditor';

protected static $css = [

'/packages/simditor-2.3.6/styles/simditor.css',

];

protected static $js = [

'/packages/simditor-2.3.6/scripts/module.js',

'/packages/simditor-2.3.6/scripts/hotkeys.js',

'/packages/simditor-2.3.6/scripts/uploader.js',

'/packages/simditor-2.3.6/scripts/simditor.js',

];

public function render()

{

$name = $this->formatName($this->column);

$token = csrf_token();

$url = route('uploadImg');

$this->script = <<

$(document).ready(function(){

var editor = new Simditor({

textarea: $('#editor'),

toolbar: ['title', 'bold', 'italic', 'underline', 'strikethrough', 'fontScale', 'color', '|', 'ol', 'ul', 'blockquote', 'code', 'table', '|', 'link', 'image', 'hr', '|', 'indent', 'outdent', 'alignment'],

upload: {

url: '$url',

params: { _token: '$token'},

fileKey: 'upload_file',

connectionCount: 3,

leaveConfirm: '文件上传中，关闭此页面将取消上传。'

},

pasteImage: true,

});

});

EOT;

return parent::render();

}

}

2. 创建对应视图

{{$label}}

@include('admin::form.error')

{{ old($column, $value) }}

3. bootstrap.php中注册扩展

use App\Admin\Extensions\Simditor;

use Encore\Admin\Form;

Encore\Admin\Form::forget(['map', 'editor']);

Form::extend('seditor', Simditor::class);

4. 调用simditor

$form->seditor('body', '文章内容');

安装Intervention/image扩展包

composer require intervention/image

获取配置信息

php artisan vendor:publish --provider="Intervention\Image\ImageServiceProviderLaravel5"

创建工具类app/Handlers/ImageUploadHandler.php

namespace App\Handlers;

use Image;

class ImageUploadHandler

{

protected $allowed_ext = ["png", "jpg", "gif", 'jpeg'];

public function save($file, $folder, $file_prefix, $max_width = false)

{

// 构建存储的文件夹规则，值如：uploads/images/avatars/201709/21/

// 文件夹切割能让查找效率更高。

$folder_name = "uploads/images/$folder/" . date("Ym/d", time());

// 文件具体存储的物理路径，`public_path()` 获取的是 `public` 文件夹的物理路径。

// 值如：/home/vagrant/Code/larabbs/public/uploads/images/avatars/201709/21/

$upload_path = public_path() . '/' . $folder_name;

// 获取文件的后缀名，因图片从剪贴板里黏贴时后缀名为空，所以此处确保后缀一直存在

$extension = strtolower($file->getClientOriginalExtension()) ?: 'png';

// 拼接文件名，加前缀是为了增加辨析度，前缀可以是相关数据模型的 ID

// 值如：1_1493521050_7BVc9v9ujP.png

$filename = $file_prefix . '_' . time() . '_' . str_random(10) . '.' . $extension;

// 如果上传的不是图片将终止操作

if ( ! in_array($extension, $this->allowed_ext)) {

return false;

}

// 将图片移动到我们的目标存储路径中

$file->move($upload_path, $filename);

// 如果限制了图片宽度，就进行裁剪

if ($max_width && $extension != 'gif') {

// 此类中封装的函数，用于裁剪图片

$this->reduceSize($upload_path . '/' . $filename, $max_width);

}

return [

'path' => config('app.url') . "/$folder_name/$filename"

];

}

public function reduceSize($file_path, $max_width)

{

// 先实例化，传参是文件的磁盘物理路径

$image = Image::make($file_path);

// 进行大小调整的操作

$image->resize($max_width, null, function ($constraint) {

// 设定宽度是 $max_width，高度等比例双方缩放

$constraint->aspectRatio();

// 防止裁图时图片尺寸变大

$constraint->upsize();

});

// 对图片修改后进行保存

$image->save();

}

}

创建上传控制器和相关路由

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use App\Handlers\ImageUploadHandler;

use Auth;

use Log;

class UploadsController extends Controller

{

public function uploadImg(Request $request, ImageUploadHandler $uploader)

// 初始化返回数据，默认是失败的

$data = [

'success' => false,

'msg' => '上传失败!',

'file_path' => ''

];

// 判断是否有上传文件，并赋值给 $file

if ($file = $request->upload_file) {

// 保存图片到本地

$result = $uploader->save($request->upload_file, 'article', \Auth::guard('admin')->user()->id, 600);

// 图片保存成功的话

if ($result) {

$data['file_path'] = $result['path'];

$data['msg'] = "上传成功!";

$data['success'] = true;

}

}

log::info($data);

return $data;

}

}

Route::post('uploadFile', 'UploadsController@uploadImg')->name('uploadImg');

6. 效果

本作品采用《CC 协议》，转载必须注明作者和本文链接