Laravel-admin安装富文本编辑器 WangEditor 上传图片到服务器，而不是按BASE64保存
上传图片到服务器，而不是按BASE64保存
1 配置
\config\admin.php
'extensions' => [ 'wang-editor' => [ // 如果要关掉这个扩展，设置为false 'enable' => true, //'enable' => false, // 编辑器的配置 'config' => [ // `/upload`接口用来上传文件，上传逻辑要自己实现，可参考下面的`上传图片` 'uploadImgServer' => '/upload', 'uploadFileName' => 'upload_file' ] ] ],
2 设置上传路径
\app\Admin\Extensions\WangEditor.php
<?php
namespace App\Admin\Extensions;
use Encore\Admin\Form\Field;
class WangEditor extends Field
{
protected $view = 'admin.wang-editor';
protected static $css = [
'/vendor/wangEditor-3.0.9/release/wangEditor.min.css',
];
protected static $js = [
'/vendor/wangEditor-3.0.9/release/wangEditor.min.js',
];
public function render()
{
$name = $this->formatName($this->column);
$token = csrf_token();
$this->script = <<<EOT
var E = window.wangEditor
var editor = new E('#{$this->id}');
editor.customConfig.zIndex = 0;
editor.customConfig.debug = true;
editor.customConfig.pasteFilterStyle = true
editor.customConfig.uploadImgServer = '/admin/up_image';
editor.customConfig.uploadFileName = "upload_file";
editor.customConfig.uploadImgParams = {
_token: '{$token}'
}
editor.customConfig.onchange = function (html) {
$('input[name=$name]').val(html);
}
editor.create()
EOT;
return parent::render();
}
}
3 添加路由
\app\Admin\routes.php
$router->post('up_image', 'UploadController@upImage');
4 创建Handler
\app\Handlers\ImageUploadHandler.php
<?php
/**
* Created by PhpStorm.
* User: TTT
* Date: 2019/10/29
* Time: 17:07
*/
namespace App\Handlers;
class ImageUploadHandler
{
// 只允许以下后缀名的图片文件上传
protected $allowed_ext = ["png", "jpg", "gif", 'jpeg'];
public function save($file, $folder, $file_prefix)
{
// 构建存储的文件夹规则，值如：uploads/images/201709/21/
// 文件夹切割能让查找效率更高。
$folder_name = "upload/$folder/" . date("Ym", time()) . '/'.date("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);
return [
'path' => config('app.url') . "/$folder_name/$filename"
];
}
}
5 UploadController
\app\Admin\Controllers\UploadController.php
<?php
/**
* Created by PhpStorm.
* User:ttt
* Date: 2019/10/29
* Time: 17:10
*/
namespace App\Admin\Controllers;
use App\Http\Controllers\Controller;
use App\Handlers\ImageUploadHandler;
use Illuminate\Http\Request;
class UploadController extends Controller
{
/**
* 富文本编辑器上传图片
* @param Request $request
* @param ImageUploadHandler $uploader
* @return array
*/
public function upImage(Request $request, ImageUploadHandler $uploader)
{
// 初始化返回数据，默认是失败的
$data = [
'errno' => 1,
];
// 判断是否有上传文件，并赋值给 $file
if ($file = $request->upload_file) {
// 保存图片到本地
$result = $uploader->save($request->upload_file, 'admin', 'editor');
// 图片保存成功的话
if ($result) {
$data['data'][] = $result['path'];
$data['errno'] = 0;
}
}
return $data;
}
}
参考来源网站：https://www.cnblogs.com/polax/p/11751758.html