layui编辑器(layedit)的实现和图片上传功能

官方文档入口: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"=> $picUrl25 ,"title"=> $_FILES["file"]["name"] //可选26  ]27  ];28 echo json_encode( $data );29 } else {30 echo json_encode([‘code‘ => ‘1‘, ‘url‘ => ‘‘]);31  }32 }

 

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

 

相关文章