本章節主要講解如果靈活運用layui和thinkphp5進行無刷新圖片上傳 #### 1.上傳接口書寫 1.建立一個Upliad.php上傳控制器 2.在控制器下首先建立一個受保護的(protected)的_initialize方法，在這個方法中要進行驗證用戶是否進行登陸，如果沒有進行登陸，需要跳轉到登錄頁面，如果有登錄就執行下面的上傳方法 3.在控制器建立上傳方法 業務邏輯如下： 1. 獲取表單上傳文件 ` $file = $request->file('file');` 2. .移動到框架應用根目錄/public/uploads/ 目錄下 ~~~ $info = $file->move(ROOT_PATH . 'public' . DS . 'uploads'); ~~~ 3 .返回上傳后的信息。無論是成功還是失敗都需要返回信息，返回格式必須如下格式 ~~~ { "code": 0 ,"msg": "" ,"data": { "src": "http://cdn.abc.com/123.jpg" } } ~~~ # 詳細代碼：[Source Code](上傳接口.md) #### 2.視圖設計 1. 導入的js和css文件 2. html代碼，添加一個上傳input `<input type="file" name="file" class="layui-upload-file">` 3. js代碼的實現 * 加載upload模塊 * 詳細參數 | | | | | --- | --- | --- | | 參數 | 類型 | 描述 | | elem | string | 指定元素的選擇器，默認直接查找class為layui-upload-file的元素 | |url |string |上傳文件的接口| |method |string |設置http類型，如：post、get。默認post。也可以直接在input設置lay-method="get"來取代。| |before| function| 執行上傳前的回調| |success| function| 上傳成功后的回調| |type| string |設定上傳的文件類型，也可以直接在input設置lay-type=""來取代（詳細見下文）。| |ext |string |自定義可支持的文件擴展名，也可以直接在input設置lay-ext=""來取代（詳細見下文）。| |unwrap| boolean |是否不改變input的樣式風格。默認false| * 官網案例說明 我們上傳文件是借助type為file的input標簽來完成的，但非常遺憾的是，它不能很好地與其它表單元素并存，所以我們常常要單獨為它做一個業務層面的“異步上傳”，即先讓圖片上傳，再和其它表單一起提交保存。下面就是一個非常普通的input，它可以出現你頁面的任何位置。 ~~~ <input type="file" name="file（可隨便定義）" class="layui-upload-file"> ~~~ 另外class="layui-upload-file"不是必須的，她只是會讓你的input短暫性隱藏，并且在調用upload方法時不用設置elem。要使得這個input能正常地用起來，你只需要執行下述方法： ~~~ layui.upload({ url: '上傳接口url' ,success: function(res){ console.log(res); //上傳成功返回值，必須為json格式 } }); ~~~ 實現異步上傳官網說明地址:http://www.layui.com/doc/modules/upload.html # 詳細代碼：[Source Code](視圖.md)