thinkphp wangEditor 图片上传

1.html

 

<div id="editor">
</div>
<!--
  wangEditor无法设置name属性
  为上传添加一个隐藏的textarea
-->
<textarea id="tarea" name="content" hidden></textarea>





<!-- 引入wangEditor JS -->
<script type="text/javascript" src="__STATIC__/wangEditor/release/wangEditor.min.js"></script>

<!-- 配置wangEditor -->
<script>
var E = window.wangEditor
var editor = new E(\'#editor\')// 上传图片到服务器
editor.customConfig.uploadImgServer = \'/upload\' ; 
// 将图片大小限制为 3M
editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
// 限制一次最多上传 3 张图片
editor.customConfig.uploadImgMaxLength = 3;
//监控wangEditor变化, 把内容更新到textarea中
var $tarea=$(\'#tarea\');
editor.customConfig.onchange=function(html){
   $tarea.val(html)
};

editor.create();
$tarea.val(editor.txt.html());
</script>

 

 

 

 2.tp5

    先设置路由: upload

 

Route::rule(\'upload\',\'index/index/upload\');

 

 

    控制器index中添加upload方法:

public function upload()
    {
        $files = request()->file();
        $imags = [];
        $errors = [];
        foreach($files as $file){
            // 移动图片到/public/uploads/ 目录下
            $info = $file->move(ROOT_PATH . \'public\' . DS . \'uploads\');
            if($info){
               // 成功上传 图片地址加入到数组
                $path = \'/uploads/\'.$info->getSaveName();
                array_push($imags,$path);
            }else{
                array_push($errors,$file->getError());
            }
        }

        //输出wangEditor规定的返回数据
        if(!$errors){
            $msg[\'errno\'] = 0;
            $msg[\'data\'] = $imags;
            return json($msg);
        }else{
            $msg[\'errno\'] = 1;
            $msg[\'data\'] = $imags;
            $msg[\'msg\'] = "上传出错";
            return json($msg);
        }
    }    

 

3.提交表单