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