黑馬在線教育項目---34-37、webuploader實現用戶頭像的異步上傳
一、總結
一句話總結：
啟迪：可以多看學習視頻，在看電影看電視的時候看的確是不錯的選擇
1、關於軟件的發行版本？
第1階段：alpha版本，內測版本；
第2階段：beta版本，公測版本；
第3階段：RC版本，（Release Candidate）候選版本，主要任務進行項目排錯；
第4階段：Release版本，穩定的發行版本；
2、webuploader上傳圖片官方提供了樣例比較完善的js？
也就是樣例用的js代碼：應該更加仔細的閱讀文檔
在案例中官網提供比較完善的js源碼文件，可以參考：
https://fex.baidu.com/webuploader/js/getting-started.js
找到這個文件中的針對“圖片上傳demo”的部分，將其復制出來，粘貼到新建的一個JavaScript文件中，在視圖中做引入即可。
3、chrome查看post請求攜帶的參數？
請求的Headers里面的Form Data里面可以查看
4、如何知道webuploader如何攜帶更多參數，比如_token？
可以在github上面查看issue，也可以直接百度
5、在storage門面中，有一個“磁盤”的概念，“磁盤”一共有三種：本地磁盤、公共磁盤、第三方磁盤，分別是什么（“磁盤”實質上就是一個目錄）？
1：本地磁盤（local磁盤），存放在local磁盤中的文件是不能被瀏覽器訪問到的，存儲在其中的文件一般都是項目的php代碼自身使用；【磁盤位置位於/Storage/app】
2：公共磁盤（public磁盤），存儲在該磁盤中的文件一般是允許瀏覽器進行訪問的；【磁盤位置位於：/Storage/app/public】
3：第三方磁盤：驅動形式的一種，允許開發者將文件上傳到第三方的服務器上；
磁盤存在一個配置文件，位置/config/filesystems.php；
6、Storage門面的通用文件保存方法？
Storage::disk(磁盤名) -> put(文件名,文件的內容);
7、默認情況下，瀏覽器是無法訪問到public磁盤目錄，但是其又想讓瀏覽器訪問，所以需要做一個“軟連接”的操作（當軟連接創建好之后。Public磁盤中的內容會被同步到/public/storage下？
#php artisan storage:link
8、webuploader選擇圖片的時候也會顯示之前的，也就是顯示多個，這顯然是錯的，如何解決？
用jquery刪除之前的就好：$('.thumbnail').remove()
二、webuploader實現用戶頭像的異步上傳
異步：ajax 需要借助於ajax來實現目標的效果（無刷新）
由於異步的上傳代碼篇幅較大，也不好去調試，純自己手寫是很大的挑戰，一般都會使用一些開源成型的jQuery插件。
插件：webuploader（基於jQuery開發，百度公司開發）
官網：https://fex.baidu.com/webuploader/
下載地址：https://github.com/fex-team/webuploader/releases
關於軟件的發行版本：
第1階段：alpha版本，內測版本；
第2階段：beta版本，公測版本；
第3階段：RC版本，（Release Candidate）候選版本，主要任務進行項目排錯；
第4階段：Release版本，穩定的發行版本；
①解壓之后得到的目錄結構（4個圈起來的是比較重要的）：
②需要引入資源
a. 將需要使用的整個webuploader目錄復制到當前的站點目錄下
b. 在視圖（views/admin/member/add.blade.php）中引入需要使用的js和css文件
引入css文件：
引入JavaScript文件：
③使用圖片上傳功能
地址：
https://fex.baidu.com/webuploader/getting-started.html#%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0
a. 先引入html代碼（創建選擇文件的按鈕，創建存放文件信息的容器），替換掉之前的文件選擇按鈕
b. 實例化webuploader實例（初始化操作）
在案例中官網提供比較完善的js源碼文件，可以參考：
https://fex.baidu.com/webuploader/js/getting-started.js
找到這個文件中的針對“圖片上傳demo”的部分，將其復制出來，粘貼到新建的一個JavaScript文件中，在視圖中做引入即可。
c. 將avatar.js文件在視圖中引入
d. 根據實際的情況修改avatar.js文件
根據請求的數據，得知其上傳文件的默認name值是file：
e. 根據路由信息，創建對應的控制器和方法去處理異步上傳的請求
異步文件上傳流程說明：
Ⅰ：產生異步的請求
Ⅱ：請求得有一個響應的方法（需要返回值，返回的內容是圖片的路徑；在此不需要進行數據表交互操作）
Ⅲ：當異步請求獲取到響應之后需要存儲圖片的地址（但是又沒必要給用戶看地址，因此可以使用隱藏域的方式進行存儲）
Ⅳ：當用戶提交表單的時候順帶提交隱藏域地址
創建需要的控制器文件：
#php artisan make:controller Admin/UploaderController
創建需要的處理方法webuploader
f. 解決csrf的驗證問題
由於異步提交和表單自身不是同一次請求，所以表單的csrftoken值不能被異步的ajax使用。
需要單獨給ajax異步添加csrf的token值。
在框架中如果引入的外部文件，需要注意在外部文件中不能使用模版引擎技術的內容，否則不解析：
g. 實現上傳處理方法
在larvel項目中除了在上傳的時候可以使用move和store方法【都是request實例封裝的】之外，還可以使用高級的上傳文件保存方法（由storage門面提供的），詳情可以參考手冊：
Storage門面在使用的時候需要的注意事項：
Ⅰ：在storage門面中，有一個“磁盤”的概念，“磁盤”一共有三種：本地磁盤、公共磁盤、第三方磁盤；“磁盤”實質上就是一個目錄
Ⅱ：本地磁盤（local磁盤），存放在local磁盤中的文件是不能被瀏覽器訪問到的，存儲在其中的文件一般都是項目的php代碼自身使用；【磁盤位置位於/Storage/app】
Ⅲ：公共磁盤（public磁盤），存儲在該磁盤中的文件一般是允許瀏覽器進行訪問的；【磁盤位置位於：/Storage/app/public】
Ⅳ：第三方磁盤：驅動形式的一種，允許開發者將文件上傳到第三方的服務器上；
Ⅴ：磁盤存在一個配置文件，位置/config/filesystems.php；
補充：默認情況下，瀏覽器是無法訪問到public磁盤目錄，但是其又想讓瀏覽器訪問，所以需要做一個“軟連接”的操作（當軟連接創建好之后。Public磁盤中的內容會被同步到/public/storage下）：
#php artisan storage:link
Storage門面的通用文件保存方法：
Storage::disk(磁盤名) -> put(文件名,文件的內容);
成功之后的返回值：
h. 異步請求回調處理
添加隱藏域，用於存放地址：
編寫回調代碼：
i. 數據入表
j. 細節完善：在上傳的時候只顯示一個文件
修改的代碼：
數據表的數據體現：
