php编辑可以自动上传图片,thinkphp编辑器实现上传图片的方法

thinkphp编辑器实现上传图片的方法

发布时间:2020-12-17 11:17:19

来源:亿速云

阅读:80

作者:小新

小编给大家分享一下thinkphp编辑器实现上传图片的方法,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!

thinkphp富文本编辑器实现上传图片的方法步骤为:

1、首先,实现文章发布或编辑的form表单,初始化layui富文本编辑器,效果如下:文章发布表单对应的HTML代码如下:

77456f93d39ff85dd5e6eceb50d6430f.png

590c1f0a79ef1a25a1f3505d15a2b75d.png

2、其中是layedit的目标元素,建立编辑器以及表单提交的js代码如下:

实现layedit插入图片接口需要在建立编辑器之前配置uploadImage,本例中配置代码如上图JS代码所示。

bb59accfe9be8b26b3b472b64b6fb7ae.png

3、layedit不提供服务端的图片接受,需要我们在接口中实现,图片上传成功后返回指定格式的JSON信息,格式如下:{

"code": 0, //0表示成功,其它失败

"msg": "", //提示信息 //一般上传失败后返回

"data": {

"src": "图片路径",

"title": "图片名称" //可选

}

}

b65de1442633486d543ce6e413b7e01c.png

4、本例中用thinkPHP5实现编辑器插入图片接口的代码如下:

我创建了一个资源上传的控制器,专门用来处理文件上传相关业务,其中有关thinkPHP5上传文件的代码请参考TP的官方文档,这里不做过多解释。

0511535cf5879c75ca6f4cca5ad24e58.png

5、然后,发布一篇科技互联网新闻,演示一下效果。

在第一段后面添加一张图片,提交后效果如下:

836936840e84c8b7e83f595ffa606545.png

看完了这篇文章,相信你对thinkphp编辑器实现上传图片的方法有了一定的了解,想了解更多相关知识,欢迎关注亿速云行业资讯频道,感谢各位的阅读!

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值