直播原始碼開發，laravel-admin整合wangEditor2及上傳圖片

直播原始碼開發，laravel-admin整合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及上傳圖片，更多內容歡迎關注之後的文章