layui编辑器（layedit）的实现和图片上传功能

Posted 2020-11-27 hinq

官方文档入口：https://www.layui.com/doc/modules/layedit.html#uploadImage

先看效果图片：

 

开始上代码了 前端代码

1 <div class="layui-input-block">
2     <textarea id="demo" style="display: none;"></textarea>
3 </div>

js代码

 1 layui.use(‘layedit‘, function(){
 2     var layedit = layui.layedit;
 3     layedit.set({
 4         uploadImage: {  //上传图片的设置
 5             url: ‘{{route(‘admin_upload_layui_img‘)}}‘ //接口url
 6            ,type: ‘post‘ //默认post
 7         }
 8     });
 9      layedit.build(‘demo‘);  //建立编辑器
10 });

php后台上传图片的接口

 1     /**
 2      *  layui上传图片 上传到本地服务器
 3      *  hinq 2020 03 03
 4      *
 5      */
 6     public function uploadLayuiImg()
 7     {
 8         if ($_FILES["file"]["error"] == 0) {
 9             //这里是上传图片处理代码 网上有跟多 我就不写注释了
10             $fileUrl = ‘upload/imgs‘;
11             $dir = iconv("UTF-8", "GBK", $fileUrl);
12             if (!file_exists($dir)) {
13                 mkdir($dir, 777, true);
14             }
15             $suffix = ‘.‘ . pathinfo($_FILES["file"]["name"], PATHINFO_EXTENSION);
16             $picUrl = $fileUrl . ‘/‘ . self::GetRandStr() . $suffix;
17             move_uploaded_file($_FILES["file"]["tmp_name"], $picUrl);
18 
19             //返回参数是官网规定的格式
20             $data = [
21                 "code"=> 0 //0表示成功，其它失败
22                 ,"msg"=> "" //提示信息 //一般上传失败后返回
23                 ,"data"=> [
24                     "src"=> $picUrl
25                     ,"title"=> $_FILES["file"]["name"] //可选
26                 ]
27             ];
28             echo json_encode( $data );
29         } else {
30             echo json_encode([‘code‘ => ‘1‘, ‘url‘ => ‘‘]);
31         }
32     }

 

到这里layui编辑器（layedit） + 上传图片的功能就好了