腳本之家服務(wù)器常用軟件

快捷導(dǎo)航

Laravel+Layer實現(xiàn)圖片上傳功能(整理篇)

更新時間：2018年01月04日 11:18:45 作者：moTzxx 關(guān)注

這篇文章主要介紹了Laravel+Layer實現(xiàn)圖片上傳功能(整理篇),需要的朋友可以參考下

♩ 背景

昨天在自己的 Laravel5.5 框架項目中，希望集成 Layer 的圖片上傳功能但是在 ajax（POST） 提交請求時，一直顯示 500 報錯

♪ 分析

⒈ 問題所在

最后將核心代碼摘出，放到 Larvel 框架以外運(yùn)行，發(fā)現(xiàn)代碼是沒有問題的，因為對 Laravel 框架接觸的太淺，忽視了 CSRF 的限制

⒉ 解決方案

一般在表單提交時，都會存放一個隱藏的輸入框

<input type="hidden" name="_token" value="<?php echo csrf_token(); ?>">

或者在需要提交的表單中補(bǔ)充一行代碼：

<form method="POST" action="/profile"> {{ csrf_field() }} ...</form>

但是，在比較單一的元素進(jìn)行 ajax 提交時，建議可使用如下的方法

①. 頁面中添加隱藏域

<input type="hidden" name="_token" class="tag_token" value="<?php echo csrf_token(); ?>">

②. ajax 請求前，先獲取 csrf_token() 值

var tag_token = $(".tag_token").val();

③. ajax 請求時，將該值作為數(shù)據(jù)的一部分傳輸過去，例如：

data:{'_token':tag_token}

♫ 實現(xiàn)步驟

⒈ 源文件目錄

⒉ 前端準(zhǔn)備

頁面引入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è)置一些后綴，用于演示前端驗證和后端的驗證
  //,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)，并實現(xiàn)重傳
  return layer.msg('上傳失敗,請重新上傳');
  }
 });
 });
</script>

⒊ 后端處理

因為前端 Layer 默認(rèn)的是 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 = "此文件已經(jīng)存在啦";
 } else {
 //TODO 判斷當(dāng)前的目錄是否存在，若不存在就新建一個!
 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 = "文件上傳失敗，請稍后再嘗試";
  }
 }
 }
} else {
 $message = "參數(shù)錯誤";
}
return showMsg($status, $message);

【注意】： 使用下載的源碼文件時，可將該處的核心代碼進(jìn)行替換

補(bǔ)充公共函數(shù) showMsg() ：

function showMsg($status,$message = '',$data = array()){
 $result = array(
 'status' => $status,
 'message' =>$message,
 'data' =>$data
 );
 exit(json_encode($result));
}

⒋ 實現(xiàn)效果

♬ 補(bǔ)充

⒈ 注意事項提供的代碼，可用于 PHP 的原生開發(fā)或其他流行框架，其實只要后臺能接收到 $_FILES 數(shù)據(jù)就好辦了我就是卡在了 Laravel 框架的 CSRF 認(rèn)證上，耗費(fèi)了好多時間，所以：

<!--如果使用的是Laravel框架，打開下面這句話！-->
 <!--<input type="hidden" name="_token" class="tag_token" value="<?php /*echo csrf_token(); */?>">-->

后端代碼的圖片上傳功能屬于原生程序，可自行優(yōu)化，建議使用流行框架所推薦的集成方法。 ⒉ move_uploaded_file() 補(bǔ)充

對于上述的代碼，需要注意一點(diǎn) : move_uploaded_file() 方法的使用

如果圖片所上傳的目錄不存在，很可能會報錯，所以需要判斷當(dāng)前情況，若不存在，要建立新目錄

//TODO 判斷當(dāng)前的目錄是否存在，若不存在就新建一個!
if (!is_dir($path)){mkdir($path,0777);}

⒊ Laravel 中的處理作為 PHP 開發(fā)的流行框架，必然做了對文件上傳功能的集成，文件的上傳，可參考學(xué)習(xí)文檔，以本人的處理為例：

⑴. 相對于使用默認(rèn)的上傳方法，會將文件存放到 "storage" 目錄中，而進(jìn)一步對該目錄的訪問還需要添加軟鏈接，感覺有點(diǎn)麻煩，所以我指定磁盤到 "public" 目錄即可

⑵. 可參考我之前的一篇文章—— Laravel 文件上傳功能實現(xiàn) ，打開配置文件 config/filesystems.php ，向磁盤配置數(shù)組中添加一個 url

'upload' => [
  'driver' => 'local',
  'root' => public_path('upload/image/'.date('Ymd')),
 ],

⑶. 相對應(yīng)的后臺核心處理代碼則為：

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ù)錯誤";
 }
 return showMsg($status, $message,$data);
 }

如此一來，上傳的圖片所在目錄為： public/upload/image/{$date}/

☺ 源碼下載

源碼下載提供

總結(jié)

以上所述是小編給大家介紹的Laravel+Layer實現(xiàn)圖片上傳功能(整理篇)，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: