富文本编辑器对接thinkphp多图片上传之踩坑笔记

发表时间:2019-01-26 13:40:28
摘要信息

富文本编辑器对接thinkphp多图片上传之踩坑笔记

富文本编辑器用的是 wangEditor3使用手册
thinkphp多图片上传文档地址看云文档 点我进去

开始!
前端页面富文本开始配置
容器

<div id="addtop" style="background-color: white;" class="pn_box">
</div>
<!-- 上面是富文本工具栏 下面是富文本文本编辑框 -->
<div id="addArticle" class="pn_box">
</div>


富文本js配置

var E = window.wangEditor
var editor2 = new E('#addtop','#addArticle')
editor2.customConfig.uploadImgServer = '/uploadImgMore'
editor2.customConfig.uploadFileName = 'file[]'
editor2.create()



要注意富文本返回的json格式

thinkphp后台配置

public function uploadImgMore(){
$files = request()->file('file');
$res = (Object)null;//$res返回结果
$userid = getUserId('username');
$v = Db::name('user')->where('user_num',$userid)->find();
if (file_exists(ROOT_PATH.'public/uploads/'. $userid."more")) {
}
else{
mkdir(ROOT_PATH."public/uploads/" . $userid."more", 0700);
}
$img = (array)null;//图片上传成功后,会把img的url依次push进这个数组
$i = -1;
if (!empty($v)) {
foreach($files as $file){
// 移动到框架应用根目录/public/uploads/ 目录下
$info = $file->move(ROOT_PATH . 'public' . DS . 'uploads'. DS . "$userid"."more");
$i++;
if($info){
$img[$i] = "/uploads/" . $userid ."more"."/". date("Ymd") . '/'. $info->getFilename();
//thinkphp 自己本身保存的路径为public\uploads\date("Ymd"),这里我加上了(用户id more);方便管理,也就是路径变成了public\uploads\date("Ymd")\用户IDmore\生成的图片名称.后缀。
$res -> errno = 0;
}else{
// 上传失败获取错误信息
$res -> errno = $file->getError();
}
$res -> data = $img;
}
}else{
$res -> errno = '游客无法上传图片。';
}
return json($res);
}


最后上一张效果图




JSON返回截图



---------------------
作者:qq_42289686
来源:CSDN
原文:https://blog.csdn.net/qq_42289686/article/details/86645550
版权声明:本文为博主原创文章,转载请附上博文链接!

40% Complete (success)