layui編輯器（layedit）的實現和圖片上傳功能

官方文檔入口：https://www.layui.com/doc/modules/layedit.html#uploadImage

先看效果圖片：

 

開始上代碼了 前端代碼

<div class="layui-input-block">
    <textarea id="demo" style="display: none;"></textarea>
</div>

js代碼

layui.use('layedit', function(){
    var layedit = layui.layedit;
    layedit.set({
        uploadImage: {  //上傳圖片的設置
            url: '{{route('admin_upload_layui_img')}}' //接口url
           ,type: 'post' //默認post
        }
    });
     layedit.build('demo');  //建立編輯器
});

php后台上傳圖片的接口

    /**
     *  layui上傳圖片 上傳到本地服務器
     *  hinq 2020 03 03
     *
     */
    public function uploadLayuiImg()
    {
        if ($_FILES["file"]["error"] == 0) {
            //這里是上傳圖片處理代碼 網上有跟多 我就不寫注釋了
            $fileUrl = 'upload/imgs';
            $dir = iconv("UTF-8", "GBK", $fileUrl);
            if (!file_exists($dir)) {
                mkdir($dir, 777, true);
            }
            $suffix = '.' . pathinfo($_FILES["file"]["name"], PATHINFO_EXTENSION);
            $picUrl = $fileUrl . '/' . self::GetRandStr() . $suffix;
            move_uploaded_file($_FILES["file"]["tmp_name"], $picUrl);

            //返回參數是官網規定的格式
            $data = [
                "code"=> 0 //0表示成功，其它失敗
                ,"msg"=> "" //提示信息 //一般上傳失敗后返回
                ,"data"=> [
                    "src"=> $picUrl
                    ,"title"=> $_FILES["file"]["name"] //可選
                ]
            ];
            echo json_encode( $data );
        } else {
            echo json_encode(['code' => '1', 'url' => '']);
        }
    }

 

到這里layui編輯器（layedit） + 上傳圖片的功能就好了