国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

laravel中使用WangEditor及多圖上傳

FingerLiu / 1369人閱讀

摘要：多圖上傳修改里面的方法將封面修改為封面創(chuàng)建圖片修改器修改器使用說明，請閱讀相關(guān)說明文檔在里增加和兩個方法顯示效果原文地址地址

laravel中使用WangEditor及多圖上傳 1. 創(chuàng)建項目及安裝所需安裝包 1.1 創(chuàng)建項目 
composer create-project laravel/laravel=5.3 blog_wangeditor --prefer-dist
1.2 創(chuàng)建數(shù)據(jù)庫及配置文件 
vim .env
1.3 安裝中文包 
composer require "caouecs/laravel-lang:~3.0"

安裝之后將語言包移動到對應(yīng)位置就好了，語言包默認位置是resources/lang

cp -a vendor/caouecs/laravel-lang/src/zh-CN resources/lang

修改config/app.php將local的值改為zh-CN

1.4 安裝laravel-admin

composer 安裝

composer require encore/laravel-admin "1.3.*"

在config/app.php加入ServiceProvider:

EncoreAdminProvidersAdminServiceProvider::class

發(fā)布資源

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

安裝

php artisan admin:install
1.5 快速生成前端登錄注冊模塊 
php artisan make:auth

執(zhí)行遷移

php artisan migrate
2. 快速生成文章管理 2.1 創(chuàng)建遷移表 
php artisan make:migration create_posts_table --create=posts
2.2 修改遷移表database/2018_01_14_191442_create_posts_table.php 
    public function up()
    {
        Schema::create("posts", function (Blueprint $table) {
            $table->increments("id");
            $table->text("title");
            $table->text("subtitle");
            $table->text("cover");
            $table->enum("type", ["0", "1", "2", "3", "4", "5", "9"])->default("0");
            $table->text("content");
            $table->timestamps();
        });
    }
2.3 執(zhí)行遷移 
php artisan migrate
2.4 創(chuàng)建模型和控制器

模型

php artisan make:model AppModelsPost

控制器

php artisan admin:make PostController --model=AppModelsPost
2.5 新增文章后臺路由

Admin/routes.php

$router->resource("/post", "PostController");
2.6 修改app/Admin/PostController.php里面的form和grid兩個方法 
    protected function grid()
    {
        return Admin::grid(Post::class, function (Grid $grid) {

            $grid->id("ID")->sortable();
            $grid->title("標題");
            $grid->subtitle("副標題");
            $grid->type("類型")->options([
                "0" => "php",
                "1" => "laravel",
                "2" => "javascript",
                "3" => "python",
                "4" => "golang",
                "5" => "linux",
                "9" => "other"
            ]);
             $grid->cover("封面")->image("/uploads", 100, 100);
            $grid->content("內(nèi)容")->limit(100);
            $grid->created_at("創(chuàng)建時間");
            $grid->updated_at("修改時間");
        });
    }

    protected function form()
    {
        return Admin::form(Post::class, function (Form $form) {

            $form->display("id", "ID");
            $form->text("title", "標題");
            $form->textarea("subtitle", "副標題")->rows(3);
            $form->select("type", "類型")->options([
                "0" => "php",
                "1" => "laravel",
                "2" => "javascript",
                "3" => "python",
                "4" => "golang",
                "5" => "linux",
                "9" => "other"
            ]);
            $form->image("cover", "封面");
            $form->editor("content", "內(nèi)容");
            $form->display("created_at", "創(chuàng)建時間");
            $form->display("updated_at", "修改時間");
        });
    }
3. 集成WangEditor編輯器 3.1 移除已有組件

修改app/Admin/bootstrap.php


3.2 集成富文本編輯器wangEditor

先下載前端庫文件wangEditor，解壓到目錄public/vendor/wangEditor-3.0.9。


然后新建組件類app/Admin/Extensions/WangEditor.php。
關(guān)于WangEditor設(shè)置部分請閱讀官方文檔


formatName($this->column);

        $this->script = <<id}");
editor.customConfig.uploadFileName = "mypic[]";
editor.customConfig.uploadImgHeaders = {
    "X-CSRF-TOKEN": $("input[name="_token"]").val()
}
editor.customConfig.zIndex = 0;
// 上傳路徑
editor.customConfig.uploadImgServer = "/uploadFile";
editor.customConfig.onchange = function (html) {
    $("input[name=$name]").val(html);
}
editor.customConfig.uploadImgHooks = {
    customInsert: function (insertImg, result, editor) {
        if (typeof(result.length) != "undefined") {
            for (var i = 0; i <= result.length - 1; i++) {
                var j = i;
                var url = result[i].newFileName;
                insertImg(url);
            }
            toastr.success(result[j]["info"]);
        }

        switch (result["ResultData"]) {
            case 6:
                toastr.error("最多可以上傳4張圖片");
                break;
            case 5:
                toastr.error("請選擇一個文件");
                break;
            case 4:
                toastr.error("上傳失敗");
                break;
            case 3:
                toastr.error(result["info"]);
                break;
            case 2:
                toastr.error("文件類型不合法");
                break;
            case 1:
                toastr.error(result["info"]);
                break;
        }
    }
}
editor.create();

// var editor = new wangEditor("{$this->id}");
//     editor.create();

EOT;
        return parent::render();

    }
}


新建視圖文件resources/views/admin/wang-editor.blade.php：




    

    


        @include("admin::form.error")

        

            
{!! old($column, $value) !!}

        


        

    




然后注冊進laravel-admin,在app/Admin/bootstrap.php中添加以下代碼：




調(diào)用：


$form->editor("body");

3.3 完成WangEditor圖片上傳
3.3.1 創(chuàng)建上傳路由routes/web.php


Route::post("/uploadFile", "UploadsController@uploadImg");

3.3.2 創(chuàng)建上傳文件控制器UploadsController


php artisan make:controller UploadsController


修改appControllersUploadsController.php


file("mypic");
        // dd($file);
        if (!empty($file)) {
            foreach ($file as $key => $value) {
                $len = $key;
            }
            if ($len > 25) {
                return response()->json(["ResultData" => 6, "info" => "最多可以上傳25張圖片"]);
            }
            $m = 0;
            $k = 0;
            for ($i = 0; $i <= $len; $i++) {
                // $n 表示第幾張圖片
                $n = $i + 1;
                if ($file[$i]->isValid()) {
                    if (in_array(strtolower($file[$i]->extension()), ["jpeg", "jpg", "gif", "gpeg", "png"])) {
                        $picname = $file[$i]->getClientOriginalName();//獲取上傳原文件名
                        $ext = $file[$i]->getClientOriginalExtension();//獲取上傳文件的后綴名
                        // 重命名
                        $filename = time() . str_random(6) . "." . $ext;
                        if ($file[$i]->move("uploads/images", $filename)) {
                            $newFileName = "/" . "uploads/images" . "/" . $filename;
                            $m = $m + 1;
                            // return response()->json(["ResultData" => 0, "info" => "上傳成功", "newFileName" => $newFileName ]);

                        } else {
                            $k = $k + 1;
                            // return response()->json(["ResultData" => 4, "info" => "上傳失敗"]);
                        }
                        $msg = $m . "張圖片上傳成功 " . $k . "張圖片上傳失敗
";
                        $return[] = ["ResultData" => 0, "info" => $msg, "newFileName" => $newFileName];
                    } else {
                        return response()->json(["ResultData" => 3, "info" => "第" . $n . "張圖片后綴名不合法!
" . "只支持jpeg/jpg/png/gif格式"]);
                    }
                } else {
                    return response()->json(["ResultData" => 1, "info" => "第" . $n . "張圖片超過最大限制!
" . "圖片最大支持2M"]);
                }
            }

        } else {
            return response()->json(["ResultData" => 5, "info" => "請選擇文件"]);
        }
        return $return;
    }
}

3.3.3 修改config/admin.php upload里面的host


    "upload"  => [

        "disk" => "admin",

        "directory"  => [
            "image"  => "image",
            "file"   => "file",
        ],
        // 將upload改為uploads
        "host" => "http://localhost:8000/uploads/",
    ],


預(yù)覽圖


可以看出WangEditor上傳多圖是沒有問題的


可是有時候我們想給文章配多個封面圖怎么辦？
下面我們就來完成，laravel-admin的多圖上傳。

4. laravel-admin 多圖上傳
4.1 修改app/Admin/PostController里面的form()方法

將$form->image("cover", "封面");
修改為$form->multipleImage("cover", "封面");

4.2 創(chuàng)建圖片修改器

laravel修改器使用說明，請閱讀相關(guān)說明文檔
在app/Models/Post.php里增加setCoverAttribute()
和setCoverAttribute兩個方法


attributes["cover"] = json_encode($cover);
        }
    }

    public function getCoverAttribute($cover)
    {
        return json_decode($cover, true);
    }
}


顯示效果


原文地址https://www.bear777.com/blog/laravel-wangeditor
github地址https://github.com/pandoraxm/laravel-admin-wangeditor

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/31979.html

相關(guān)文章

  • laravel中使用WangEditor及多圖上傳

    摘要：多圖上傳修改里面的方法將封面修改為封面創(chuàng)建圖片修改器修改器使用說明，請閱讀相關(guān)說明文檔在里增加和兩個方法顯示效果原文地址地址 laravel中使用WangEditor及多圖上傳 1. 創(chuàng)建項目及安裝所需安裝包 1.1 創(chuàng)建項目 composer create-project laravel/laravel=5.3 blog_wangeditor --prefer-dist 1.2 創(chuàng)建...

    qianfeng 評論0 收藏0

  • laravel中使用WangEditor及多圖上傳(下篇)

    摘要：中使用及多圖上傳下篇快速生成前臺文章創(chuàng)建路由快速生成文章控制器修改文章控制器創(chuàng)建視圖文件列表頁文章列表頁文章列表什么都沒有詳情頁詳情頁圖 laravel中使用WangEditor及多圖上傳(下篇) 1. 快速生成前臺文章 1.1 創(chuàng)建路由 Route::resource(/article, ArticleController); 1.2 快速生成文章控制器ArticleControll...

    hosition 評論0 收藏0

  • laravel5.3 vue 實現(xiàn)收藏夾功能

    摘要：要定義這種關(guān)系，請打開模型并添加一個注意模型的命名空間是所以注意要頭部引入第二個參數(shù)是數(shù)據(jù)透視表收藏夾的名稱。這將允許插入或更新行時，數(shù)據(jù)透視表上的時間戳和列將受到影響。 laravel5.3 vue 實現(xiàn)收藏夾功能 ? 本篇是接著laravel中使用WangEditor及多圖上傳(下篇) 所以我們這里不演示怎么新建項目了。? 1. laravel項目安裝 ?下載之前的項目，完成安裝。...

    adie 評論0 收藏0

  • laravel5.3 vue 實現(xiàn)收藏夾功能

    摘要：要定義這種關(guān)系，請打開模型并添加一個注意模型的命名空間是所以注意要頭部引入第二個參數(shù)是數(shù)據(jù)透視表收藏夾的名稱。這將允許插入或更新行時，數(shù)據(jù)透視表上的時間戳和列將受到影響。 laravel5.3 vue 實現(xiàn)收藏夾功能 ? 本篇是接著laravel中使用WangEditor及多圖上傳(下篇) 所以我們這里不演示怎么新建項目了。? 1. laravel項目安裝 ?下載之前的項目，完成安裝。...

    mumumu 評論0 收藏0

  • yamecent-admin 基于laravel框架的rbac后臺管理系統(tǒng)

    摘要：示例列表批量操作按鈕批量刪除全選復(fù)選框列表復(fù)選框示例部分截圖作者年月日 歡迎使用yamecent-admin后臺管理 環(huán)境要求 依賴 說明 PHP PHP7+ 項目簡介 yamecent-admin是一款基于laravel框架進行封裝的后臺管理系統(tǒng),其中包含： rbac權(quán)限管理模塊 完整的ui組件(外部引入) 圖片上傳,網(wǎng)絡(luò)請求等常用的js公共函數(shù) 持續(xù)維護中... ...

    Elle 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<