基於ThinkPHP5和Layui框架，實現圖片上傳以及預覽

本文主要演示的是基於ThinkPHP5+Layui框架，實現圖片上傳以及圖片預覽，通過實現EY內容管理系統的文章添加以及編輯功能展示如何使用前端框架layui和TP5實現圖片上傳，當然圖片上傳解決了，文件上傳就沒有問題了。

首先，編寫EY內容管理系統的文章發布頁面，效果如下：

其中，關於文章縮略圖上傳的代碼如下圖：

從代碼中可以看出，我並沒有將文件上傳的input放在form中，只寫了一個隱藏的input用來設置縮略圖的文件路徑，這就用到了layui的文件上傳，相關的JavaScript代碼如下：

對於以上代碼不多解釋，layui的文檔已經比較詳細了。其中，{:url('admin/asset/imgUpload')}是通過thinkPHP5的助手函數url生成的文件上傳介面，介面代碼如下：

這一部分代碼，我也不要多做解釋，比較容易理解，thinkphp5的文檔寫的也比較簡單。如有必要可以留言交流哈！然後來看一下上傳效果：

我上傳了一張小於200kb的jpg格式的圖片，按照上圖隱藏表單的value值，上傳的文件應該是在uploud/admin/20171014目錄下，文件名為947a9db8be3ebe93440c29871ef548ea.jpg，看一下實際路徑（如下圖）是一致的。

雖然這裡只演示了EY內容管理系統文章縮略圖的上傳，文件上傳也是一樣的道理，取消對頁面代碼和js代碼稍加修改，去掉預覽即可。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！