♩ 背景
昨天在自己的 Laravel5.5 框架項目中，希望集成 Layer 的圖片上傳功能 但是在 ajax（POST） 提交請求時，一直顯示 500 報錯
♪ 分析
⒈ 問題所在
最后將核心代碼摘出，放到 Larvel 框架以外運行，發現代碼是沒有問題的，因為對 Laravel 框架接觸的太淺，忽視了 CSRF 的限制
⒉ 解決方案
一般在表單提交時，都會存放一個隱藏的輸入框
<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">
或者在需要提交的表單中補充一行代碼：
<form method="POST" action="/profile"> {{ csrf_field() }} ...</form>
但是，在比較單一的元素進行 ajax 提交時，建議可使用如下的方法
①. 頁面中添加隱藏域
<input type="hidden" name="_token" class="tag_token" value="<?php echo csrf_token(); ?>">
②. ajax 請求前，先獲取 csrf_token() 值
var tag_token = $(".tag_token").val();
③. ajax 請求時，將該值作為數據的一部分傳輸過去，例如：
data:{'_token':tag_token}
♫ 實現步驟
⒈ 源文件目錄
⒉ 前端準備
頁面引入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">v</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' //設置一些后綴，用于演示前端驗證和后端的驗證
//,auto:false //選擇圖片后是否直接上傳
//,accept:'images' //上傳文件類型
,url: 'upload.php'
,data:{'_token':tag_token}
,before: function(obj){
//預讀本地文件示例，不支持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(){
//演示失敗狀態，并實現重傳
return layer.msg('上傳失敗,請重新上傳');
}
});
});
</script>
⒊ 后端處理
因為前端 Layer 默認的是 POST 請求，則后臺 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) { // 出錯
$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 = "此文件已經存在啦";
} else {
//TODO 判斷當前的目錄是否存在，若不存在就新建一個!
if (!is_dir($path)){mkdir($path,0777);}
$upload_result = move_uploaded_file($file_tmp, $file_path);
//此函數只支持 HTTP POST 上傳的文件
if ($upload_result) {
$status = 1;
$message = $file_path;
} else {
$message = "文件上傳失敗，請稍后再嘗試";
}
}
}
} else {
$message = "參數錯誤";
}
return showMsg($status, $message);
【注意】： 使用下載的源碼文件時，可將該處的核心代碼進行替換
【網站聲明】本站除付費源碼經過測試外，其他素材未做測試，不保證完整性，網站上部分源碼僅限學習交流，請勿用于商業用途。如損害你的權益請聯系客服QQ：2655101040 給予處理，謝謝支持。