♩ 背景
昨天在自己的 Laravel5.5 框架項(xiàng)目中，希望集成 Layer 的圖片上傳功能 但是在 ajax（POST） 提交請(qǐng)求時(shí)，一直顯示 500 報(bào)錯(cuò)
♪ 分析
⒈ 問(wèn)題所在
最后將核心代碼摘出，放到 Larvel 框架以外運(yùn)行，發(fā)現(xiàn)代碼是沒(méi)有問(wèn)題的，因?yàn)閷?duì) Laravel 框架接觸的太淺，忽視了 CSRF 的限制
⒉ 解決方案
一般在表單提交時(shí)，都會(huì)存放一個(gè)隱藏的輸入框
input type="hidden" name="_token" value="?php echo csrf_token(); ?>">
或者在需要提交的表單中補(bǔ)充一行代碼：
form method="POST" action="/profile"> {{ csrf_field() }} .../form>
但是，在比較單一的元素進(jìn)行 ajax 提交時(shí)，建議可使用如下的方法
①. 頁(yè)面中添加隱藏域
input type="hidden" name="_token" class="tag_token" value="?php echo csrf_token(); ?>">
②. ajax 請(qǐng)求前，先獲取 csrf_token() 值
var tag_token = $(".tag_token").val();
③. ajax 請(qǐng)求時(shí)，將該值作為數(shù)據(jù)的一部分傳輸過(guò)去，例如：
data:{'_token':tag_token}
♫ 實(shí)現(xiàn)步驟
⒈ 源文件目錄
⒉ 前端準(zhǔn)備
頁(yè)面引入layui 的 css 和 js 文件
script type="text/javascript" src="layui/layui.js">/script>script src="https://code.jquery.com/jquery-3.2.1.min.js">/script>link rel="stylesheet" type="text/css" href="layui/css/layui.css" rel="external nofollow" />
注： 本人下載的 layui 框架源碼包為 layui-v2.2.45
核心代碼：
div class="layui-form-item">
div class="layui-upload">
button type="button" name="img_upload" class="layui-btn btn_upload_img">
i class="layui-icon">/i>上傳圖片 /button>
img class="layui-upload-img img-upload-view" src="upload/dog.jpg">
p id="demoText">/p>
/div>
/div>
js 代碼：
script type="text/javascript">
layui.use('upload', function(){
var upload = layui.upload;
var tag_token = $(".tag_token").val();
//普通圖片上傳
var uploadInst = upload.render({
elem: '.btn_upload_img'
,type : 'images'
,exts: 'jpg|png|gif' //設(shè)置一些后綴，用于演示前端驗(yàn)證和后端的驗(yàn)證
//,auto:false //選擇圖片后是否直接上傳
//,accept:'images' //上傳文件類型
,url: 'upload.php'
,data:{'_token':tag_token}
,before: function(obj){
//預(yù)讀本地文件示例，不支持ie8
obj.preview(function(index, file, result){
$('.img-upload-view').attr('src', result); //圖片鏈接（base64）
});
}
,done: function(res){
//如果上傳失敗
if(res.status == 1){
return layer.msg('上傳成功');
}else{//上傳成功
layer.msg(res.message);
}
}
,error: function(){
//演示失敗狀態(tài)，并實(shí)現(xiàn)重傳
return layer.msg('上傳失敗,請(qǐng)重新上傳');
}
});
});
/script>
⒊ 后端處理
因?yàn)榍岸?Layer 默認(rèn)的是 POST 請(qǐng)求，則后臺(tái) uplaod.php 核心代碼如下：
if ($_POST) {
//上傳圖片具體操作
$file_name = $_FILES['file']['name'];
//$file_type = $_FILES["file"]["type"];
$file_tmp = $_FILES["file"]["tmp_name"];
$file_error = $_FILES["file"]["error"];
$file_size = $_FILES["file"]["size"];
if ($file_error > 0) { // 出錯(cuò)
$message = $file_error;
} elseif($file_size > 1048576) { // 文件太大了
$message = "上傳文件不能大于1MB";
}else{
$date = date('Ymd');
$file_name_arr = explode('.', $file_name);
$new_file_name = date('YmdHis') . '.' . $file_name_arr[1];
$path = "upload/".$date."/";
$file_path = $path . $new_file_name;
if (file_exists($file_path)) {
$message = "此文件已經(jīng)存在啦";
} else {
//TODO 判斷當(dāng)前的目錄是否存在，若不存在就新建一個(gè)!
if (!is_dir($path)){mkdir($path,0777);}
$upload_result = move_uploaded_file($file_tmp, $file_path);
//此函數(shù)只支持 HTTP POST 上傳的文件
if ($upload_result) {
$status = 1;
$message = $file_path;
} else {
$message = "文件上傳失敗，請(qǐng)稍后再嘗試";
}
}
}
} else {
$message = "參數(shù)錯(cuò)誤";
}
return showMsg($status, $message);
【注意】： 使用下載的源碼文件時(shí)，可將該處的核心代碼進(jìn)行替換
補(bǔ)充公共函數(shù) showMsg() ：
function showMsg($status,$message = '',$data = array()){
$result = array(
'status' => $status,
'message' =>$message,
'data' =>$data
);
exit(json_encode($result));
}
⒋ 實(shí)現(xiàn)效果
♬ 補(bǔ)充
⒈ 注意事項(xiàng) 提供的代碼，可用于 PHP 的原生開(kāi)發(fā)或其他流行框架，其實(shí)只要后臺(tái)能接收到 $_FILES 數(shù)據(jù)就好辦了 我就是卡在了 Laravel 框架的 CSRF 認(rèn)證上，耗費(fèi)了好多時(shí)間，所以：
!--如果使用的是Laravel框架，打開(kāi)下面這句話！-->
!--input type="hidden" name="_token" class="tag_token" value="?php /*echo csrf_token(); */?>">-->
后端代碼的圖片上傳功能屬于原生程序，可自行優(yōu)化，建議使用流行框架所推薦的集成方法。 ⒉ move_uploaded_file() 補(bǔ)充
對(duì)于上述的代碼，需要注意一點(diǎn) : move_uploaded_file() 方法的使用
如果圖片所上傳的目錄不存在，很可能會(huì)報(bào)錯(cuò)，所以需要判斷當(dāng)前情況，若不存在，要建立新目錄
//TODO 判斷當(dāng)前的目錄是否存在，若不存在就新建一個(gè)!
if (!is_dir($path)){mkdir($path,0777);}
⒊ Laravel 中的處理 作為 PHP 開(kāi)發(fā)的流行框架，必然做了對(duì)文件上傳功能的集成，文件的上傳，可參考學(xué)習(xí)文檔，以本人的處理為例：
⑴. 相對(duì)于使用默認(rèn)的上傳方法，會(huì)將文件存放到 "storage" 目錄中，而進(jìn)一步對(duì)該目錄的訪問(wèn)還需要添加軟鏈接，感覺(jué)有點(diǎn)麻煩，所以我指定磁盤(pán)到 "public" 目錄即可
⑵. 可參考我之前的一篇文章—— Laravel 文件上傳功能實(shí)現(xiàn) ，打開(kāi)配置文件 config/filesystems.php ，向磁盤(pán)配置數(shù)組中添加一個(gè) url
'upload' => [
'driver' => 'local',
'root' => public_path('upload/image/'.date('Ymd')),
],
⑶. 相對(duì)應(yīng)的后臺(tái)核心處理代碼則為：
public function img_file(Request $request)
{
$status = 0;
$data = [];
if ($request->method()== 'POST') {
$date = date('Ymd');
$path = $request->file('file')->store('', 'upload');
if ($path){
$fileUrl = '/upload/image/'.$date.'/'.$path;
$status = 1;
$data['url'] = $fileUrl;
$message = '上傳成功';
}else{
$message = "上傳失敗";
}
} else {
$message = "參數(shù)錯(cuò)誤";
}
return showMsg($status, $message,$data);
}
如此一來(lái)，上傳的圖片所在目錄為： public/upload/image/{$date}/
☺ 源碼下載
源碼下載提供
總結(jié)
以上所述是小編給大家介紹的Laravel+Layer實(shí)現(xiàn)圖片上傳功能(整理篇)，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
您可能感興趣的文章:- PHP Laravel 上傳圖片、文件等類封裝
- laravel實(shí)現(xiàn)一個(gè)上傳圖片的接口,并建立軟鏈接,訪問(wèn)圖片的方法
- laravel 實(shí)現(xiàn)上傳圖片到本地和前臺(tái)訪問(wèn)示例
- laravel實(shí)現(xiàn)上傳圖片的兩種方式小結(jié)
- Laravel框架實(shí)現(xiàn)的上傳圖片到七牛功能詳解
- laravel 多圖上傳及圖片的存儲(chǔ)例子
- laravel實(shí)現(xiàn)上傳圖片并在頁(yè)面顯示的例子
- laravel實(shí)現(xiàn)圖片上傳預(yù)覽,及編輯時(shí)可更換圖片,并實(shí)時(shí)變化的例子
- laravel實(shí)現(xiàn)上傳圖片,并且制作縮略圖,按照日期存放的代碼
- laravel框架上傳圖片實(shí)現(xiàn)實(shí)時(shí)預(yù)覽功能
- laravel5.5框架的上傳圖片功能實(shí)例分析【僅傳到服務(wù)器端】
