laravel-admin整合wangEditor2及上传图片

小伙伴说MD编辑器不好用，因为复制粘贴不方便。。。。所以我换了一个编辑器整合，选择了老朋友wangEditor，下面为大家介绍怎么在laravel v6.9 + laravel-admin v1.7 + wangEditor2的情况下上传图片

第一步：

composer require jxlwqq/wang-editor2

第二步：发布配置文件：

php artisan vendor:publish --tag=laravel-admin-wang-editor2

第三步：修改laravel-admin配置文件config/admin.php中的extensions，加上下面的配置：

'extensions' => [
    'wang-editor2' => [
        // 如果要关掉这个扩展，设置为false
        'enable' => true,
        // 编辑器的配置
        'config' => [
            'uploadImgFileName' => 'up_image', //这个应该wangEditor的上传方法名字，不要乱改
            'uploadImgUrl' => '/admin/upload', //注意这里是上传的路由地址
            'menus' => [
                'source',
                '|',
                'bold',
                'underline',
                'italic',
                'strikethrough',
                'eraser',
                'forecolor',
                'bgcolor',
                '|',
                'quote',
                'fontfamily',
                'fontsize',
                'head',
                'unorderlist',
                'orderlist',
                'alignleft',
                'aligncenter',
                'alignright',
                '|',
                'link',
                'unlink',
                'table',
                '|',
                'img',
                'video',
                'insertcode',
                '|',
                'undo',
                'redo',
                'fullscreen'
            ],
        ]
    ]
]

第四步：新建laravel后端的图片上传文件app\Handlers\ImageUploadHandler.php：

<?php

namespace App\Handlers;

use Image;
use Str;

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' => "/$folder_name/$filename"
            //'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();
    }
}

第五步：新建laravel-admin路由，在app\Admin\routes.php中加入：

$router->post('up_image', 'UploadController@upImage');

第六步：在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->up_image) {
            // 保存图片到本地，参数分别是：文件，目标文件夹，文件前缀，文件最大宽度
            $result = $uploader->save($request->up_image, 'articleimg', 'admin', 650);
            // 图片保存成功的话
            if ($result) {
                $data['data'][] = $result['path'];
                $data['errno']   = 0;
            }
        }

        return $result['path'];
    }
}

laravel-admin整合wangEditor2及上传图片

重点主意一个细节：如果你安装了laravel-debug，请一定关闭，不然return的数据会跟一堆参数导致上传失败！！！

通过上面的步骤以后，你应该就能正常通过laravel-admin在后台上传图片了，如果有什么问题可以给我留言。

猜你喜欢