layui富文本編輯器添加圖片回顯問題詳解

最近寫項目中需要用到LayUI富文本編輯器，其他地方都挺好，唯獨上傳圖片時，要不就是上傳完成后回顯404，要不就是訪問時404（訪問時我是新打開的一個頁面），返回路徑一直有問題，之后把返回的路徑改成絕對路徑就可以。

效果圖如下：

 

 

 

 先添加上傳圖片接口，layui會自動傳遞參數，后台直接寫對應的上傳方法就行了。

 

 

var layedit = layui.layedit;
layedit.set({    //設置圖片接口
      uploadImage: {
        url: 'layUITextarea/upload', //接口url
        type: 'post'
      }
});

后台上傳完成后需要返回四個參數，layui自定義接收顯示（不返回圖片無法顯示）

layui前台接收返回的數據格式為：  （后台一定要按照格式數據返回，否則會報錯）

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

轉載：https://blog.csdn.net/qq_40205116/article/details/89433791

 

------------------------------------------------------------自己項目----------------------------------------------------------

前台代碼：

 

 

 

 

后台接口代碼：

 //富文本圖片
    public function form_img()
    {
       
        $file = request()->file('file');

        //dump($file);die;
        // 移動到框架應用根目錄/public/uploads/ 目錄下
        $info = $file->move('../public/upload/admin/article/fuwenben/');
        if($info){
            // 成功上傳后 獲取上傳信息
            // 輸出 jpg
            //$path =  $info->getExtension();
            $info_img  = '/upload/admin/article/fuwenben/'.str_replace('\\','/',$info->getSaveName());
            return json(array('code'=>0,'msg'=>'上傳成功','data'=>['src'=>$info_img,'title'=>'富文本圖片']));

        }else{
            // 上傳失敗獲取錯誤信息
            echo $file->getError();
        }
    }