繁體中文

Laravel 教學

Laravel - 檔案上傳：初學者的全面指南

你好，有抱負的開發者們！今天，我們將踏上一段令人興奮的旅程，探索Laravel中的檔案上傳世界。作為你們親切友善的電腦老師，我將一步一步地指導你們。別擔心如果你是編程新手——我們會從基礎開始，逐步學習。所以，來一杯咖啡（或者如果你喜歡，來一杯茶），我們一起來深入了解一下吧！

Laravel - File Uploading

什麼是檔案上傳？

在我們進入代碼之前，讓我們先了解什麼是檔案上傳。想像一下，你試圖在線上與朋友分享你喜歡的假期照片。將這張圖像從你的電腦傳送到網站的过程就是我們所謂的“檔案上傳”。在網頁開發中，我們經常需要允許用戶上傳各種類型的檔案——圖像、文件、視頻，你說得出的都有！

為什麼選擇Laravel進行檔案上傳？

我們選擇的PHP框架Laravel，讓檔案上傳變得非常簡單。它提供了簡潔而優雅的方法來處理檔案上傳，確保你的應用程序可以安全且高效地管理用戶提交的檔案。相信我，嘗試過其他框架的檔案上傳後，你會感激Laravel的直接方法！

建立我們的專案

首先，讓我們建立一個新的Laravel專案。如果你還沒有這麼做，打開你的終端機並運行以下命令：

composer create-project --prefer-dist laravel/laravel file-upload-demo

這個命令會創建一個名為"file-upload-demo"的新Laravel專案。完成後，進入你的專案目錄：

cd file-upload-demo

創建我們的檔案上傳表單

現在，讓我們創建一個允許用戶上傳檔案的簡單表單。我們首先創建一個新的Blade模板。在resources/views目錄中創建一個名為upload.blade.php的新文件，並添加以下代碼：

<!DOCTYPE html>
<html>
<head>
<title>檔案上傳演示</title>
</head>
<body>
<h2>上傳一個檔案</h2>
<form action="{{ route('upload') }}" method="POST" enctype="multipart/form-data">
@csrf
<input type="file" name="file">
<button type="submit">上傳</button>
</form>
</body>
</html>

讓我們分解一下：

  1. 我們創建了一個簡單的HTML表單。
  2. action屬性指向一個名為'upload'的路由（我們稍後會創建）。
  3. method設置為POST，因為我們正在向服務器發送數據。
  4. enctype="multipart/form-data"對檔案上傳至關重要——它告訴瀏覽器以可以包含檔案的格式發送表單數據。
  5. @csrf是一個Laravel指令，它添加了一個CSRF令牌以防止跨站請求偽造攻擊。
  6. 我們有一個類型為"file"的輸入，這允許用戶從他們的設備選擇一個檔案。

設置路由

現在有了我們的表單，我們需要設置一個路由來處理顯示表單和處理上傳。打開routes/web.php並添加以下幾行：

use App\Http\Controllers\FileController;

Route::get('/', [FileController::class, 'showForm']);
Route::post('/upload', [FileController::class, 'upload'])->name('upload');

在這裡，我們定義了兩個路由：

  1. 一個GET路由對於根URL ('/')，它會顯示我們的上傳表單。
  2. 一個POST路由對於'/upload'，它會處理檔案上傳過程。

創建控制器

接下來，我們需要創建一個控制器來處理這些路由。在你的終端機中運行以下命令：

php artisan make:controller FileController

這會創建一個新的控制器文件。打開app/Http/Controllers/FileController.php並將其內容替換為：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class FileController extends Controller
{
public function showForm()
{
return view('upload');
}

public function upload(Request $request)
{
if ($request->hasFile('file')) {
$file = $request->file('file');
$path = $file->store('uploads');
return "檔案上傳成功！路徑: " . $path;
}
return "沒有上傳檔案。";
}
}

讓我們分解一下upload方法中發生的事情：

  1. 我們檢查是否有檔案被上傳使用$request->hasFile('file')。
  2. 如果有檔案存在，我們使用$request->file('file')來獲取它。
  3. 我們使用Laravel的store方法將檔案保存在'storage'文件夹中的'uploads'目錄下。
  4. 最後，我們返回一個帶有檔案路徑的成功消息。

測試我們的檔案上傳

現在，讓我們測試一下我們的檔案上傳功能：

  1. 在終端機中啟動Laravel開發服務器，運行php artisan serve。
  2. 在瀏覽器中訪問http://localhost:8000。
  3. 你應該會看到我們創建的上傳表單。
  4. 選擇一個檔案並點擊"上傳"。
  5. 如果一切正常，你應該會看到帶有檔案路徑的成功消息。

處理不同的檔案類型

在真實世界的應用程序中，你經常需要處理不同類型的檔案。讓我們修改我們的控制器來處理這些：

public function upload(Request $request)
{
if ($request->hasFile('file')) {
$file = $request->file('file');
$extension = $file->getClientOriginalExtension();

$allowedExtensions = ['jpg', 'png', 'pdf', 'doc', 'docx'];

if (in_array($extension, $allowedExtensions)) {
$path = $file->store('uploads/' . $extension);
return "檔案上傳成功！路徑: " . $path;
} else {
return "不允許的檔案類型。";
}
}
return "沒有上傳檔案。";
}

在這個更新版本中：

  1. 我們使用getClientOriginalExtension()獲取檔案擴展名。
  2. 我們定義了一個允許的檔案類型列表。
  3. 我們檢查上傳的檔案擴展名是否在我們的允許列表中。
  4. 如果是，我們按類型將其存儲在子目錄中。
  5. 如果不是，我們返回一個錯誤消息。

顯示上傳的圖像

如果你正在處理圖像上傳，你可能想要在上傳後顯示它們。讓我們修改我們的控制器來處理這一點：

public function upload(Request $request)
{
if ($request->hasFile('file')) {
$file = $request->file('file');
$extension = $file->getClientOriginalExtension();

if ($extension === 'jpg' || $extension === 'png') {
$path = $file->store('public/uploads');
$url = asset(Storage::url($path));
return view('image', ['url' => $url]);
} else {
return "只允許JPG和PNG檔案顯示。";
}
}
return "沒有上傳檔案。";
}

創建一個新的視圖文件resources/views/image.blade.php：

<!DOCTYPE html>
<html>
<head>
<title>上傳的圖像</title>
</head>
<body>
<h2>你的上傳圖像：</h2>
<img src="{{ $url }}" alt="上傳的圖像" style="max-width: 500px;">
</body>
</html>

現在，當你上傳一個圖像時，你會在頁面上看到它被顯示出來！

結論

恭喜你！你剛剛學會了Laravel中檔案上傳的基本知識。我們已經介紹了創建表單、處理檔案上傳、存儲檔案，甚至顯示上傳的圖像。記住，檔案上傳是一個強大的功能，但總是要驗證和清潔你的輸入以保持應用程序的安全。

當你繼續你的Laravel之旅時，你會發現更多先進的檔案處理技巧。但現在，給自己一個鼓勵——你在網頁開發的冒險中迈出了重要的一步！

以下是我们在本文中使用的方 法的快速參考表：

方法 描述
$request->hasFile('file') 檢查是否有檔案被上傳
$request->file('file') 獲取上傳的檔案
$file->store('path') 在指定路徑中存儲檔案
$file->getClientOriginalExtension() 獲取原始檔案擴展名
Storage::url($path) 為存儲的檔案生成URL

快樂編程，願你的上傳總是成功！

Credits: Image by storyset

上一教程:
Laravel - 驗證
下一教程:
Laravel - 發送電子郵件