thinkphp編輯器實(shí)現(xiàn)上傳圖片的方法

發(fā)布時(shí)間：2020-12-17 11:17:19 來源：億速云閱讀：283 作者：小新欄目：編程語言

小編給大家分享一下thinkphp編輯器實(shí)現(xiàn)上傳圖片的方法，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！

thinkphp富文本編輯器實(shí)現(xiàn)上傳圖片的方法步驟為：

1、首先，實(shí)現(xiàn)文章發(fā)布或編輯的form表單，初始化layui富文本編輯器，效果如下：文章發(fā)布表單對(duì)應(yīng)的HTML代碼如下：

2、其中是layedit的目標(biāo)元素，建立編輯器以及表單提交的js代碼如下：

實(shí)現(xiàn)layedit插入圖片接口需要在建立編輯器之前配置uploadImage，本例中配置代碼如上圖JS代碼所示。

thinkphp編輯器實(shí)現(xiàn)上傳圖片的方法

3、layedit不提供服務(wù)端的圖片接受，需要我們?cè)诮涌谥袑?shí)現(xiàn)，圖片上傳成功后返回指定格式的JSON信息，格式如下：

{
    "code": 0, //0表示成功，其它失敗
    "msg": "", //提示信息 //一般上傳失敗后返回
    "data": {
        "src": "圖片路徑",
        "title": "圖片名稱" //可選
    }
}

thinkphp編輯器實(shí)現(xiàn)上傳圖片的方法

4、本例中用thinkPHP5實(shí)現(xiàn)編輯器插入圖片接口的代碼如下：

我創(chuàng)建了一個(gè)資源上傳的控制器，專門用來處理文件上傳相關(guān)業(yè)務(wù)，其中有關(guān)thinkPHP5上傳文件的代碼請(qǐng)參考TP的官方文檔，這里不做過多解釋。

thinkphp編輯器實(shí)現(xiàn)上傳圖片的方法

5、然后，發(fā)布一篇科技互聯(lián)網(wǎng)新聞，演示一下效果。

在第一段后面添加一張圖片，提交后效果如下：

thinkphp編輯器實(shí)現(xiàn)上傳圖片的方法

看完了這篇文章，相信你對(duì)thinkphp編輯器實(shí)現(xiàn)上傳圖片的方法有了一定的了解，想了解更多相關(guān)知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！

向AI問一下細(xì)節(jié)

猜你喜歡