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 协议》,转载必须注明作者和本文链接