php 多图上传编辑器,laravel中使用WangEditor及多图上传
1. 创建项目及安装所需安装包
1.1 创建项目
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
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设置部分请阅读官方文档
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 = <<
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:
{{$label}}
@include('admin::form.error')
{!! old($column, $value) !!}
然后注册进laravel-admin,在app/Admin/bootstrap.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
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 . "张图片上传失败
";
$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/',
],
预览图
图1
可以看出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两个方法
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);
}
}
显示效果
图2
php 多图上传编辑器,laravel中使用WangEditor及多图上传相关推荐
- php 上传 blob,Laravel框架+Blob实现的多图上传功能示例
本文实例讲述了Laravel框架+Blob实现的多图上传功能.分享给大家供大家参考,具体如下: 一.介绍 我们知道多图上传一般都附带的又即时显示功能,即上传后可以立刻看到所传图片.之前一直用的一个多图 ...
- javaweb上传文件_javaWeb中,如何通过CommonsFileUpload组件上传文件
大家好,欢迎来到雄雄的小课堂,今天给大家分享的是<javaWeb中,如何通过Commons-FileUpload组件上传文件> 前言:文件上传大家都不陌生,在这个互联网飞速发展的时代,共享 ...
- 图形化文本编辑器_使用图形转换器从知识图生成文本
图形化文本编辑器 A summary of the structure 结构总结 This 2019 paper is a bit of an anachronism, given the speed ...
- excel箱形图中位数_在Excel中创建简单的箱形图
excel箱形图中位数 A box plot (box and whisker chart) lets you show how numbers are distributed in a set of ...
- ubuntu上python编辑器_Ubuntu中安装python编辑器Ulipad
由于在Windows中使用Ulipad一段时间了,尤其对于Python代码的编辑功能,我觉得目前还没有一款别的编辑器能与之媲美(当然Ulipad也有美中不足的地方).下面介绍一下在Linux下Ulip ...
- android 上传字符串,Android中发送Http请求(包括文件上传、servlet接收)的实例代码...
/** * 通过拼接的方式构造请求内容,实现参数传输以及文件传输 * @param actionUrl * @param params * @param files * @return * @thro ...
- python在excel中插入折线图_python如何删除excel中已经存在的折线图?
通过excel复制,重新生成一个新的excel实现: import copy import openpyxl from openpyxl.utils import get_column_letter ...
- java文件上传过滤,struts2中文件上传过滤
手动实现文件过滤 大部分时候,Web应用不允许浏览者自由上传,尤其不能允许上传可执行性文件--因为可能是病毒程序.通常,我们可以允许浏览者上传图片,上传压缩文件等:除此之外,还必须对浏览者上传的文件大 ...
- 从web编辑器 UEditor 中单独提取图片上传,包含多图片单图片上传以及在线涂鸦功能...
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码.(抄的...) UEditor是非常好用的富文 ...
最新文章
- python将空格变成换行_python之路(2)
- Linux系统Python配置MySQL详细教程
- 46.Express框架 GET 方法和POST 方法
- 【转】winform回车变为tab
- 辅助Visual Studio 2017部署的DevOps新工具
- STM32-IO引脚复用-原理和使用
- 【Tensorflow】深度学习实战02——Tensorflow实现进阶的卷积网络(CIFAR-10)
- 练习题(第二模块...模块...选择填空)
- 042 第一章 简介
- windows10小白第一次装,严格参考教程(转)
- HBuilderX搭建Vue项目
- 求解一元三次方程的方法
- Gartner发布2021年隐私技术成熟度曲线,数字伦理登上顶点
- 微信云开发——日记小程序
- vb.net 同时给多个属性赋值_C++程序入门之——赋值操作符
- 怎样对比计算机配置,硬件配置对比
- MacBook外置显卡eGPU折腾笔记
- Oracle和MySQL不同编码格式下varchar所能存储的中文数量
- 2017年最火的19个行业,你做哪行!
- 基于javaweb的酒店管理系统(java+ssm+layui+mysql)
热门文章
- opencv标定详细用法
- python下载pip脚本显示file_generateScriptFile.py脚本使用过程中遇到的问题及解决
- micropython 模块_MicroPython添加Module(一)
- jemter接口并发数怎么算_JMeter学习使用(1) - 接口GET请求并发测试
- Office 365和SFB更新
- aws-ec2-双网卡问题
- Bilateral Filtering(双边滤波) for SSAO(转)
- [Angularjs]ng-show和ng-hide
- MVC5+EF6 入门完整教程七
- 经常用到的JS 表单验证函数