# Ckfinder 圖片上傳之細節 ---- ###### tags: `CKeditor` 人生不如意喝水也會嗆死 在上傳圖片選項中呈現的視窗 ![](https://i.imgur.com/RSO0Pez.png) 按下按下瀏覽伺服器後 正常使用下會出現的視窗 ![](https://i.imgur.com/En3bGMV.png) ### 如果按下瀏覽伺服器後出現404之解法 ![](https://i.imgur.com/oZgBLnr.png) ![](https://i.imgur.com/SoGwThF.png) ![](https://i.imgur.com/oMsktLq.png) ![](https://i.imgur.com/8t4NKy5.png) 就是說 先比對config.js檔或是自定義的地方 也就是紅框的地方有沒有設定到對應的資料夾 **這裡要用webURL路徑去對應** **有用虛擬資料夾或虛擬路徑都要加上去** 例如這次專案目錄是這樣 ``` backend(後台) | --public www(前台) | -- index.php 後台目錄是: domain/admin(虛擬目錄指向public)/restFulApi路徑 前台目錄: domain/index.php(預設檔案看不到)(站台直接指向www) ``` 所以看Ckfinder放在哪裡? 若是放後台也要加上虛擬目錄 ![](https://i.imgur.com/ELlLaQ4.png) 開啟開發工具看到的url ![](https://i.imgur.com/pIcBl4t.png) 這是同一頁下的其他外連檔案之url (加上虛擬目錄的檔案/admin) ![](https://i.imgur.com/IHJutdn.png) ### 通常對應到哪?? public通常是root指向的地方也是放前端東西的資料夾 通常是vendors ![](https://i.imgur.com/ZzpME5M.png) ### CKeditor資料夾 ![](https://i.imgur.com/g4BUXTP.png) ### Ckfinder資料夾 ![](https://i.imgur.com/0JBYvWQ.png) 橘框對應橘框 ![](https://i.imgur.com/63lYs3s.png) $setup_winename="\http://192.168.1.32"; //Upimg不在根目徑下才填寫 ![](https://i.imgur.com/vcB9pHl.png) 籃框對應藍框 ![](https://i.imgur.com/r997H5w.png) 要給前台抓資料的方式用 建立虛擬目錄指向建立好的圖片資料夾 ![](https://i.imgur.com/EAPeid8.png) . . . ## 文件地址都設定好了 怎麼預覽圖還是沒看到?? 正常設定好後 圖片就可以預覽 ![](https://i.imgur.com/dzGx5di.png) 文件瀏劉覽器也是正常可用的 ![](https://i.imgur.com/fhUcYMg.png) 但遇到一個問題 再沒有虛擬網址下(方便的工具下) 文件對應地址都設定好了,怎麼預覽圖不會出來呢?? 這時先嘗試找出是哪一個對應設定有問題 先上傳檔案到伺服端 去看對應檔案資料夾中有沒有出現圖片檔案 有圖片檔但只是沒有預覽圖的話 就應該是預覽設定問題 或是url轉址問題 ![](https://i.imgur.com/CkvXLyc.png) 這次情況就是 可以上傳圖片但卻沒有預覽圖的狀況 ## baseURL/root 上面有說 baseURL => 是給預覽圖及文件瀏覽器使用的(絕對網址) root => 是實體資料夾路徑(正常是相對位置) 相對絕對是依照網路上的說明去設置 **一開始使用$setup_winename . '/upomg/'也不行** 籃框對應籃框 並使用絕對路徑網址 這時如果有虛擬資料夾要加入虛擬資料夾的路徑上去 虛擬+admin(指到public) 實際 /root/backend/public/name(對應資料夾) 需填寫以下(但這樣還不會成功等下說明) baseURL admin/name ![](https://i.imgur.com/5z2zNXu.png) ## 自動新增資料夾 不會成功原因很簡單 **就只是沒寫完整** **加上自動生成資料夾ckfinfile** 再寫root時,沒有ckfinfile的話會自動建立一個資料夾 再裡面再產生兩個資料夾所以白癡的以為可以不用寫需要自動生成之資料夾名上去(真的很蠢) ![](https://i.imgur.com/HyIzABv.png) 加上去就成功了!! ![](https://i.imgur.com/OwLEMax.png)