layui 富文本图片上传后端PHP接口

比眉伴天荒 2022-06-10 03:50 228阅读 0赞

## layui 富文本 图片上传 后端PHP接口 ##

html

<!DOCTYPE html>
    <html>
    <head>
        <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css">
        <script type="text/javascript" src='/static/js/jquery-3.2.1.min.js'></script>
        <script type="text/javascript" src='/static/layui/layui.js'></script>
        <title></title>
    </head>
    
    <body>
    <div class="right" style="margin: 90px 0 0 190px;">
        <form action="{:url('goods/doadd')}" enctype="multipart/form-data" method="post">
    
                <textarea class="layui-textarea" id="LAY_demo1" name="details" style="display: none;">  
                </textarea>
            <input type="submit" name="" value="提交">
        </form>
    
    </div>
    </body>
    <script> layui.use('layedit', function(){ var layedit = layui.layedit; layedit.set({ uploadImage: { url: '/admin/goods/uploadImage' //接口url ,type: 'post', //默认post success:function(res){ } } }); //构建一个默认的编辑器 var index = layedit.build('LAY_demo1',{ height:800 }); //编辑器外部操作 var active = { content: function(){ alert(layedit.getContent(index)); //获取编辑器内容 } ,text: function(){ alert(layedit.getText(index)); //获取编辑器纯文本内容 } ,selection: function(){ alert(layedit.getSelection(index)); } }; $('.site-demo-layedit').on('click', function(){ var type = $(this).data('type'); active[type] ? active[type].call(this) : ''; }); //自定义工具栏 layedit.build('LAY_demo2', { tool: ['face', 'link', 'unlink', '|', 'left', 'center', 'right'] ,height: 100 }) }); </script>
    </html>

php后端

public function uploadImage(Request $request) { 
    //thinkphp5的框架，如果是原生的，用$_FiLES['file']获取到图片，
            $file 	= $request->file('file');
            $info 	= $file->move(ROOT_PATH . 'public' . DS . 'uploads');
            if($info){
                 $name_path =str_replace('\\',"/",$info->getSaveName());
    
                    $result['data']["src"] = "/uploads/layui/".$name_path;
                $url 	= $info->getSaveName();
                //图片上传成功后，组好json格式，返回给前端
                $arr   = array(
                    'code' => 0,
                    'message'=>'',
                    'data' =>array(
                        'src' => "/uploads/".$name_path
                        ),
                    );
            }
    
            echo json_encode($arr);
    
        }