Laravel-admin安装富文本编辑器 WangEditor 上传图片到服务器，而不是按BASE64保存

查看手册 组件管理 https://laravel-admin.org/docs/zh/model-form-field-management.md#%E9%9B%86%E6%88%90%E5%AF%8C%E6%96%87%E6%9C%AC%E7%BC%96%E8%BE%91%E5%99%A8wangeditor

 laravel-admin 集成 WangEditor不生效参考 https://blog.csdn.net/xiaoyue_t/article/details/84636043

 

上传图片到服务器，而不是按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://blog.csdn.net/qq_25290835/article/details/88659070