内容简介:laravel中使用WangEditor及多图上传
composer create-project laravel/laravel=5.3 blog_wangeditor --prefer-dist
1.2 创建数据库及配置文件
vim .env
1.3 安装中文包
composer require "caouecs/laravel-lang:~3.0"
安装之后将语言包移动到对应位置就好了,语言包默认位置是 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:
Encore\Admin\Providers\AdminServiceProvider::class
发布资源
php artisan vendor:publish --tag=laravel-admin
安装
php artisan admin:install
1.5 快速生成前端登录注册模块
php artisan make:auth
执行迁移
php artisan migrate
2. 快速生成文章管理
2.1 创建迁移表
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 执行迁移
php artisan migrate
2.4 创建模型和控制器
模型
php artisan make:model App\\Models\\Post
控制器
php artisan admin:make PostController --model=App\\Models\\Post
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('内容')->limit(100); $grid->created_at('创建时间'); $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', '内容'); $form->display('created_at', '创建时间'); $form->display('updated_at', '修改时间'); }); }
3. 集成 WangEditor
编辑器
3.1 移除已有组件
修改 app/Admin/bootstrap.php
<?php use Encore\Admin\Form; Form::forget('map'); Form::forget('editor'); // or Form::forget(['map', 'editor']);
3.2 集成富文本编辑器wangEditor
先下载前端库文件 wangEditor ,解压到目录 public/vendor/wangEditor-3.0.9
。
然后新建组件类 app/Admin/Extensions/WangEditor.php
。 关于 WangEditor
设置部分请阅读官方文档
<?php namespace 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); $this->script = <<<EOT var E = window.wangEditor var editor = new E('#{$this->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
:
<div class="form-group {!! !$errors->has($label) ?: 'has-error' !!}"> <label for="{{$id}}" class="col-sm-2 control-label">{{$label}}</label> <div class="col-sm-{{$width['field']}}"> @include('admin::form.error') <div id="{{$id}}" style="width: 100%; height: 100%;"> <p>{!! old($column, $value) !!}</p> </div> <input type="hidden" name="{{$name}}" value="{{ old($column, $value) }}" /> </div> </div>
然后注册进 laravel-admin
,在 app/Admin/bootstrap.php
中添加以下代码:
<?php use App\Admin\Extensions\WangEditor; use Encore\Admin\Form; Form::extend('editor', WangEditor::class);
调用:
$form->editor('body');
3.3 完成 WangEditor
图片上传
3.3.1 创建上传路由 routes/web.php
Route::post('/uploadFile', 'UploadsController@uploadImg');
3.3.2 创建上传文件控制器 UploadsController
php artisan make:controller UploadsController
修改 app\Controllers\UploadsController.php
<?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; } }
3.3.3 修改 config/admin.php
upload里面的 host
'upload' => [ 'disk' => 'admin', 'directory' => [ 'image' => 'image', 'file' => 'file', ], // 将upload改为uploads 'host' => 'http://localhost:8000/uploads/', ],
预览图
- 可以看出
WangEditor
上传多图是没有问题的 可是有时候我们想给文章配多个封面图怎么办? 下面我们就来完成,laravel-admin
的多图上传。
4. laravel-admin 多图上传
4.1 修改 app/Admin/PostController
里面的 form()
方法
将 $form->image('cover', '封面');
修改为 $form->multipleImage('cover', '封面');
4.2 创建图片修改器
laravel修改器使用说明,请阅读相关说明文档 在 app/Models/Post.php
里增加 setCoverAttribute()
和 setCoverAttribute
两个方法
<?php namespace App\Models; use Illuminate\Database\Eloquent\Model; class Post extends Model { public function setCoverAttribute($cover) { if (is_array($cover)) { $this->attributes['cover'] = json_encode($cover); } } public function getCoverAttribute($cover) { return json_decode($cover, true); } }
显示效果
原文链接 www.bear777.com/blog/larave…
github地址 github.com/pandoraxm/l…
以上所述就是小编给大家介绍的《laravel中使用WangEditor及多图上传》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 使用Servlet技术上传文件
- 使用Spring Boot上传文件
- laravel中使用WangEditor及多图上传(下篇)
- 使用Fundebug API 批量上传Source Map
- Swoole实验室:7-使用Websocket上传文件(1)
- 如何使用Scala在Play!2中提供上传的文件?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
产品经理的第二本书
[美] 哥乔斯 / 戴维侬 / 中国财政经济出版社 / 2004-4 / 39.80元
产品经理的第二本书:产品经理实战技巧指南,ISBN:9787500570950,作者:(美)琳达·哥乔斯(Linda Gorchels)著;戴维侬译;戴维侬译一起来看看 《产品经理的第二本书》 这本书的介绍吧!