wangeditor上传图片php,如何利用wangeditor编辑器结合tp5框架进行多图上传

最近写项目，要用到多图上传！当然，之前用起来特别顺手的layui的富文本编辑器就不够用了

因为layui富文本编辑器只能丹徒上传

搜了下，wangeditor可以多图上传！于是就换了！也是因为个人实在不喜欢用baidueditor这种庞大的插件！

如果后期实在是要用，那就在改改项目吧！

本demo是再thinkphp5.0框架下 + wangeditor 使用的

首先wangeditor的文档：https://www.kancloud.cn/wangfupeng/wangeditor3/335782

tp5文档：https://www.kancloud.cn/manual/thinkphp5/155159

下面是demo

前台html模板

<div id="editor">

</div>

<script>

var E = window.wangEditor;

var editor = new E('#editor');

// 或者 var editor = new E( document.getElementById('editor') )

editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;

// editor.customConfig.uploadFileName = 'file';

editor.customConfig.uploadImgServer = "{:url('upload/wangeditor')}" ; // 上传图片到服务器

editor.create();

</script>

只是吧相应的提出来了，如果你的wangeditor没有上传本地图片的功能，可以参考上述js配置

后台php代码

/**

* wangeditor编辑器上传图片，可多图上传

* 返回格式

*

* {

// errno 即错误代码，0 表示没有错误。

// 如果有错误，errno != 0，可通过下文中的监听函数 fail 拿到该错误码进行自定义处理

"errno": 0,

// data 是一个数组，返回若干图片的线上地址

"data": [

"图片1地址",

"图片2地址",

"……"

]

}

*/

public function wangeditor()

{

$files = request()->file();

$imags = [];

$errors = [];

foreach($files as $file){

// 移动到框架应用根目录/public/uploads/ 目录下

$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads');

if($info){

// 成功上传后 获取上传信息

// 输出 jpg

//echo $info->getExtension();

// 输出 42a79759f284b767dfcb2a0197904287.jpg

//echo $info->getFilename();

$path = 'public/uploads/'.$info->getSaveName();

array_push($imags,$path);

}else{

// 上传失败获取错误信息

//echo $file->getError();

array_push($errors,$file->getError());

}

}

if(!$errors){

$msg['errno'] = 0;

$msg['data'] = $imags;

return json($msg);

}else{

$msg['errno'] = 1;

$msg['data'] = $imags;

$msg['msg'] = "上传出错";

return json($msg);

}

}

大部分人应该可以看懂了吧！！！

我的qq571031767！有什么开发项目可以找我！