在我們使用 laravel-admin 作為系統管理后臺的時候經常會用到 editor 作為編輯器來給我們編輯內容，但是在 laravel-admin 的官網上只介紹了怎么下載使用，其中有一個問題就是上傳圖片的問題，我們需要開發(fā)一個上傳圖片的接口。

基本的下載安裝去看 laravel-admin 官網，下面我來貼一下代碼

先來新建一個?ImageUploadHandler.php 來作為處理傳入的圖片：

<?phpnamespace App\Handlers;class ImageUploadHandler {// 只允許以下后綴名的圖片文件上傳protected $allowed_ext = ["png", "jpg", "gif", 'jpeg'];public function save($file, $folder, $file_prefix){// 構建存儲的文件夾規(guī)則，值如：uploads/images/avatars/201709/21/// 文件夾切割能讓查找效率更高。$folder_name = "uploads/$folder/" . date("Ym", time()) . '/'.date("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);return ['path' => config('app.url') . "/$folder_name/$filename"];} }

然后新建?UploadController 接口：

<?phpnamespace App\Admin\Controllers;use App\Http\Controllers\Controller; use App\Handlers\ImageUploadHandler; use Illuminate\Http\Request;class UploadController extends Controller {public function upImage(Request $request, ImageUploadHandler $uploader){// 初始化返回數據，默認是失敗的$data = ['errno' => 1,];// 判斷是否有上傳文件，并賦值給 $fileif ($file = $request->upload_file) {// 保存圖片到本地$result = $uploader->save($request->upload_file, 'admin', 1, 1024);// 圖片保存成功的話if ($result) {$data['data'][] = $result['path'];$data['errno'] = 0;}}return $data;} }

然后我們還需要修改一個 wangEditor.php 的代碼：

<?phpnamespace App\Admin\Extensions;use Encore\Admin\Form\Field;class WangEditor extends Field {protected $view = 'admin.wang-editor';protected static $css = ['/vendor/wangEditor-3.0.9/release/wangEditor.min.css',];protected static $js = ['/vendor/wangEditor-3.0.9/release/wangEditor.min.js',];public function render(){$name = $this->formatName($this->column);$token = csrf_token();$this->script = <<<EOT var E = window.wangEditor var editor = new E('#{$this->id}'); editor.customConfig.zIndex = 0; editor.customConfig.debug = true; editor.customConfig.pasteFilterStyle = true editor.customConfig.uploadImgServer = '/admin/up_image'; editor.customConfig.uploadFileName = "upload_file"; editor.customConfig.uploadImgParams = {_token: '{$token}' }editor.customConfig.onchange = function (html) {$('input[name=$name]').val(html); } editor.create()EOT;return parent::render();} }

最后在路由中新加一個路由就行了。

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅持創(chuàng)作打卡瓜分現金大獎

總結

以上是生活随笔為你收集整理的laravel-admin 使用 wangEditor 的一些小方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。