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

console.log( 最近写项目，要用到多图上传！当然，之前用起来特别顺手的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配置

```
/**
     * 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！有什么开发项目可以找我！

注:原创不易,转载请注明出处( https://micuu.com/new/282.html )，本站所有资源来源于网络收集，如有侵权请联系QQ245557979进行清除。

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

留言反馈