3.1其他跟laravel－admin文件 配置差不多

3.2 然後新建元件類app/Admin/Extensions/WangEditor.php。
關於WangEditor設定部分請閱讀官方文件

class WangEditor extends Field
{
    protected $view = 'admin.wang-editor';

    protected static $css = [
        '/vendor/wangEditor-3.0.10/release/wangEditor.css',
    ];

    protected static $js = [
        '/vendor/wangEditor-3.0.10/release/wangEditor.min.js',
    ];

    public function render()
    {
        $name = $this->formatName($this->column);

        $this->script = <<<EOT

var E = window.wangEditor
var editor = new E('#{$this->id}');
editor.customConfig.uploadFileName = 'my_image[]';
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();

    }
}

3.3 完成WangEditor圖片上傳

3.3.1 建立上傳路由routes/web.php

Route::post('/uploadFile', '[email protected]');

3.3.2 建立上傳檔案控制器UploadsController

php artisan make:controller UploadsController

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UploadsController extends Controller
{
    public function uploadImg(Request $request)
    {
        $file = $request->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 . "張圖片上傳失敗<br>";
                        $return[] = ['ResultData' => 0, 'info' => $msg, 'newFileName' => $newFileName];
                    } else {
                        return response()->json(['ResultData' => 3, 'info' => '第' . $n . '張圖片字尾名不合法!<br/>' . '只支援jpeg/jpg/png/gif格式']);
                    }
                } else {
                    return response()->json(['ResultData' => 1, 'info' => '第' . $n . '張圖片超過最大限制!<br/>' . '圖片最大支援2M']);
                }
            }

        } else {
            return response()->json(['ResultData' => 5, 'info' => '請選擇檔案']);
        }
        return $return;
    }
}
 

//-------------------------------------------以上是圖片上傳到本地的，下面才是上傳到七牛雲的－－－－－－－－－－－－－－－－－－－－－－－－－

public function uploadImg(Request $request)
{
    $file = $request->file("my_image");
    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'])) {
                    $disk = Storage::disk('qiniu');
                    $time = 'images/'.date('Ymd');
                    $filename = $disk->put($time,$file[$i]);
                    if ($filename) {
                        $img_url = $disk->getDriver()->downloadUrl($filename);
                        $m = $m + 1;
                    } else {
                        $k = $k + 1;
                    }
                    $msg = $m . "張圖片上傳成功 " . $k . "張圖片上傳失敗<br>";
                    $return[] = ['ResultData' => 0, 'info' => $msg, 'newFileName' => $img_url];
                } else {
                    return response()->json(['ResultData' => 3, 'info' => '第' . $n . '張圖片字尾名不合法!<br/>' . '只支援jpeg/jpg/png/gif格式']);
                }
            } else {
                return response()->json(['ResultData' => 1, 'info' => '第' . $n . '張圖片超過最大限制!<br/>' . '圖片最大支援2M']);
            }
        }

    } else {
        return response()->json(['ResultData' => 5, 'info' => '請選擇檔案']);
    }
    return $return;
}