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