富文本编辑器对接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返回截图