官方文档入口: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) + 上传图片的功能就好了