Tiếng Việt

Hướng dẫn Laravel

Laravel - Tải lên tệp: Hướng dẫn chi tiết cho người mới bắt đầu

Xin chào các bạn đang học lập trình! Hôm nay, chúng ta sẽ cùng nhau bắt đầu một hành trình thú vị vào thế giới của việc tải lên tệp trong Laravel. Là giáo viên lập trình ở gần nhà, tôi sẽ hướng dẫn bạn từng bước qua quá trình này. Đừng lo lắng nếu bạn mới bắt đầu học lập trình - chúng ta sẽ bắt đầu từ cơ bản và dần dần nâng cao. Hãy lấy một tách cà phê (hoặc trà, nếu bạn thích) và cùng nhau bắt đầu nhé!

Laravel - File Uploading

Tải lên tệp là gì?

Trước khi chúng ta nhảy vào mã nguồn, hãy hiểu xem việc tải lên tệp thực sự có nghĩa là gì. Hãy tưởng tượng bạn đang cố chia sẻ bức ảnh yêu thích của mình từ kỳ nghỉ với một người bạn trực tuyến. Quá trình chuyển ảnh từ máy tính của bạn lên một trang web được gọi là "tải lên tệp." Trong phát triển web, chúng ta thường cần cho phép người dùng tải lên nhiều loại tệp khác nhau - ảnh, tài liệu, video, v.v!

Tại sao chọn Laravel để tải lên tệp?

Laravel, khung công tác PHP yêu thích của chúng ta, làm cho việc tải lên tệp trở nên đơn giản. Nó cung cấp các phương thức đơn giản và tinh tế để xử lý việc tải lên tệp, đảm bảo rằng ứng dụng của bạn có thể quản lý an toàn và hiệu quả các tệp do người dùng gửi lên. Tin tôi đi, sau khi thử tải lên tệp trong các khung công tác khác, bạn sẽ thấy cách tiếp cận rõ ràng của Laravel!

Thiết lập dự án của chúng ta

Trước hết, hãy thiết lập một dự án Laravel mới. Nếu bạn chưa làm điều đó, hãy mở terminal và chạy lệnh sau:

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

Lệnh này tạo ra một dự án Laravel mới có tên "file-upload-demo". Sau khi hoàn tất, hãy di chuyển vào thư mục dự án của bạn:

cd file-upload-demo

Tạo biểu mẫu tải lên tệp

Bây giờ, hãy tạo một biểu mẫu đơn giản cho phép người dùng tải lên tệp. Chúng ta sẽ bắt đầu bằng cách tạo một mẫu blade mới. Tạo một tệp mới có tên upload.blade.php trong thư mục resources/views và thêm mã sau:

<!DOCTYPE html>
<html>
<head>
<title>File Upload Demo</title>
</head>
<body>
<h2>Tải lên tệp</h2>
<form action="{{ route('upload') }}" method="POST" enctype="multipart/form-data">
@csrf
<input type="file" name="file">
<button type="submit">Tải lên</button>
</form>
</body>
</html>

Hãy phân tích điều này:

  1. Chúng ta đã tạo một biểu mẫu HTML đơn giản.
  2. Thuộc tính action chỉ đến một route có tên 'upload' (chúng ta sẽ tạo route này ngay sau).
  3. Thuộc tính method được đặt là POST vì chúng ta đang gửi dữ liệu lên máy chủ.
  4. enctype="multipart/form-data" rất quan trọng cho việc tải lên tệp - nó thông báo cho trình duyệt gửi dữ liệu form dưới dạng có thể bao gồm tệp.
  5. @csrf là một hướng dẫn Laravel thêm một token CSRF để bảo vệ chống lại các cuộc tấn công CSRF.
  6. Chúng ta có một input loại "file" cho phép người dùng chọn tệp từ thiết bị của họ.

Thiết lập route

Bây giờ chúng ta có biểu mẫu, hãy thiết lập một route để xử lý cả việc hiển thị biểu mẫu và xử lý việc tải lên. Mở tệp routes/web.php và thêm các dòng sau:

use App\Http\Controllers\FileController;

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

Ở đây, chúng ta đang xác định hai route:

  1. Một route GET cho URL gốc ('/') sẽ hiển thị biểu mẫu tải lên.
  2. Một route POST cho '/upload' sẽ xử lý quá trình tải lên tệp.

Tạo controller

Tiếp theo, chúng ta cần tạo một controller để xử lý các route này. Chạy lệnh sau trong terminal của bạn:

php artisan make:controller FileController

Lệnh này tạo ra một tệp controller mới. Mở app/Http/Controllers/FileController.php và thay thế nội dung của nó bằng:

<?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 "Tệp tải lên thành công! Đường dẫn: " . $path;
}
return "Không có tệp nào được tải lên.";
}
}

Hãy phân tích những gì đang xảy ra trong phương thức upload:

  1. Chúng ta kiểm tra xem có tệp nào được tải lên hay không bằng $request->hasFile('file').
  2. Nếu có tệp, chúng ta lấy tệp bằng $request->file('file').
  3. Chúng ta sử dụng phương thức store của Laravel để lưu tệp vào thư mục 'uploads'.
  4. Cuối cùng, chúng ta trả về một thông báo thành công với đường dẫn tệp.

Kiểm tra chức năng tải lên tệp

Bây giờ, hãy kiểm tra chức năng tải lên tệp của chúng ta:

  1. Khởi động máy chủ phát triển Laravel của bạn bằng cách chạy php artisan serve trong terminal.
  2. Truy cập http://localhost:8000 trong trình duyệt của bạn.
  3. Bạn nên thấy biểu mẫu tải lên mà chúng ta đã tạo.
  4. Chọn một tệp và nhấp vào "Tải lên".
  5. Nếu mọi thứ hoạt động đúng, bạn nên thấy thông báo thành công với đường dẫn tệp.

Xử lý các loại tệp khác nhau

Trong các ứng dụng thực tế, bạn thường cần xử lý các loại tệp khác nhau. Hãy sửa đổi controller của chúng ta để xử lý điều này:

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 "Tệp tải lên thành công! Đường dẫn: " . $path;
} else {
return "Loại tệp không được phép.";
}
}
return "Không có tệp nào được tải lên.";
}

Trong phiên bản cập nhật này:

  1. Chúng ta lấy phần mở rộng tệp gốc bằng getClientOriginalExtension().
  2. Chúng ta xác định một mảng các loại tệp được phép.
  3. Chúng ta kiểm tra xem phần mở rộng của tệp tải lên có trong danh sách cho phép hay không.
  4. Nếu có, chúng ta lưu tệp vào thư mục con dựa trên loại của nó.
  5. Nếu không, chúng ta trả về một thông báo lỗi.

Hiển thị ảnh đã tải lên

Nếu bạn đang làm việc với việc tải lên ảnh, bạn có thể muốn hiển thị chúng sau khi tải lên. Hãy sửa đổi controller của chúng ta để xử lý điều này:

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 "Chỉ cho phép JPG và PNG để hiển thị.";
}
}
return "Không có tệp nào được tải lên.";
}

Tạo một tệp mới resources/views/image.blade.php:

<!DOCTYPE html>
<html>
<head>
<title>Ảnh đã tải lên</title>
</head>
<body>
<h2>Ảnh của bạn:</h2>
<img src="{{ $url }}" alt="Ảnh đã tải lên" style="max-width: 500px;">
</body>
</html>

Bây giờ, khi bạn tải lên một ảnh, bạn sẽ thấy nó được hiển thị trên trang!

Kết luận

Chúc mừng! Bạn vừa học được các kiến thức cơ bản về việc tải lên tệp trong Laravel. Chúng ta đã覆盖 tạo biểu mẫu, xử lý việc tải lên tệp, lưu tệp và thậm chí hiển thị ảnh đã tải lên. Nhớ rằng, việc tải lên tệp là một tính năng mạnh mẽ, nhưng hãy luôn kiểm tra và làm sạch đầu vào của bạn để giữ cho ứng dụng của bạn an toàn.

Khi bạn tiếp tục hành trình Laravel của mình, bạn sẽ khám phá nhiều kỹ thuật xử lý tệp nâng cao hơn. Nhưng hiện tại, hãy tự động viên mình - bạn đã bước một bước lớn trong hành trình phát triển web của mình!

Dưới đây là bảng tóm tắt các phương thức chúng ta đã sử dụng:

Phương thức Mô tả
$request->hasFile('file') Kiểm tra xem có tệp nào được tải lên
$request->file('file') Lấy tệp đã tải lên
$file->store('path') Lưu tệp vào đường dẫn chỉ định
$file->getClientOriginalExtension() Lấy phần mở rộng tệp gốc
Storage::url($path) Tạo URL cho tệp lưu trữ

Chúc các bạn lập trình vui vẻ, và may mắn với các lần tải lên của bạn!

Credits: Image by storyset

Hướng Dẫn Trước:
Laravel - Xác thực
Hướng Dẫn Tiếp Theo:
Laravel - Gửi Email