ThinkPHP+Layui圖片非同步上傳
- 2019 年 12 月 27 日
- 筆記
Thinkphp5.1版本的圖片上傳程式碼和以前版本沒有什麼變化，主要說下非同步上傳圖片，使用layui框架上傳單張圖片之伺服器，伺服器返回圖片地址給前台，然後前台渲染數據。
程式碼一：HTML程式碼
<div class="layui-form-item"> <label class="layui-form-label">頭像</label> <div class="layui-input-inline"> <button type="button" class="layui-btn layui-btn-primary" id="uploadUserHead"> <i class="layui-icon"></i>上傳圖片 </button> <input type="hidden" name="userhead" id="userhead"> <input class="layui-upload-file" type="file" accept="undefined" name="userhead"> </div> </div>
注意事項：
1、定義id='uploadUserHead' ，需要與 JS 程式碼內綁定元素一致
2、使用隱藏域，用來存儲上傳成功後的圖片路徑
程式碼二：JS程式碼
//注意進度條依賴 element 模組，否則無法進行正常渲染和功能性操作 layui.use(['element','upload'], function(){ var element = layui.element; var upload = layui.upload; var uploadUserHead = upload.render({ elem: '#uploadUserHead' //綁定元素 ,url: '/admin/User/uploadUserHead' //上傳介面 ,size: 2048 //大可允許上傳的大小，單位 KB ,field: 'userhead' ,done: function(res){ //上傳完畢回調 if(res.code == 200){ layer.msg(res.msg,{ icon:1,time:2000 },function () { $("#userhead").val(res.data); }) }else{ layer.msg(res.msg,{ icon:2,time:2000 }) } } ,error: function(){ layer.msg('JS error, please check'); } });
注意事項：
1、模式上傳方式為post上傳，可通過method，進行定義
2、圖片類型默認為jpg|png|gif|bmp|jpeg ，正常可默認設置
3、文件域的欄位名可通過field進行設置
4、最大文件上傳大小通過size設置，默認為0，不限制大小，單位：kb
程式碼三：PHP程式碼
/** * 圖片上傳 * @return thinkresponseJson */ public function getuploadUserHead() { // 獲取表單上傳文件 $file = request()->file('userhead'); // 移動到框架應用根目錄/uploads/ 目錄下 $path = './uploads/'; $info = $file->move($path); if($info) { // 成功上傳後 獲取上傳資訊 return json(['code' => 200, 'msg' => '上傳成功', 'data' => mb_substr($path, 1) .date('Ymd',time())."/". $info->getFilename()]); } else { // 上傳失敗獲取錯誤資訊 return json(['code' => 100, 'msg' => $file->getError()]); } }
注意事項：
1、需要寫明接收文件欄位名
2、上傳路徑需注意寫清
3、返回成功資訊時注意路徑，個人寫法規避 無法解析問題
