TP5 + layui 富文本编辑器无法显示图片的问题

时间:2024-04-02 09:00:52

荆轲刺秦王

layui 的富文本编辑器小巧,界面简单大方,缺点也很明显,那就是功能相较于百度的富文本编辑器要少。

本文主要介绍了 layui 在富文本编辑器中上传完图片后 无法正常显示的问题及其解决方案。

其实图片无法显示的问题也很简单,layui 在文档里 说的也很清楚:

TP5 + layui 富文本编辑器无法显示图片的问题

我第一次尝试的时候,文件没有显示出来的根本原因在于,返回的 json 数据格式不对,因为他的 code 为 0 的时候才表示成功,而我却定义的是 1 ,所以导致图片一直无法正常显示。

贴一下 我的上传代码:

//上传图片
    public function upload(){
        $file = request()->file('file');

        if($file){
            $info = $file->move('./uploads');
            if($info){
                $result['code']  =  0;  //为了照顾到layui富文本编辑器的小脾气 所以此处必须要用0表示成功
                $result['msg']   =  '上传成功';
                $result['data']['src'] = '/uploads/'.str_replace('\\', '/', $info->getSaveName());
                $result['data']['title'] = '';
                echo json_encode($result);exit();
            }else{
                $result['code']  =  2;
                $result['msg']   =  '上传失败';
                $result['data']['src'] = '';
                $result['data']['title'] = '';
                echo json_encode($result);exit();
            }
        }else{
            return false;
        }
    }

layui 的上传图片和富文本编辑器的图片上传部分,都可以用这一个后台接口。

还有就是,之所以要 echo json_encode();exit(); 是因为在TP5中 如果配置文件中 app_debug 的调试模式,如果为 true 的时候, return 和 echo();exit(); 的结果是不一样的。这个需要注意。

至于前台代码  就不啰嗦,在 layui 官方文档上都有详细的例子,几乎就是拿来即用。