Upload Multiple File hay còn gọi là upload nhiều file cùng lúc. Nó được sử dụng trong quá trình upload nhiều ảnh sản phẩm nổi bật cho một sản phẩm trong quá trình lập trình web bán hàng.
Bài viết này tôi chia sẻ nhanh cách để có thể tạo chức năng Upload Multiple File với Laravel 8 với các chức năng chính:
- Hiển thị form upload
- Xử lý upload file
- Lưu trữ file upload vào folder trên dự án đồng thời lưu thông tin file vào database
- Hiển thị danh sách file đã upload
- Xóa file file đã upload
Bây giờ bạn hãy thao tác theo từng bước để tạo ra chức năng upload multiple file bằng laravel trên dự án của mình.
Bước 1: Tải dự án Laravel 8
Ở bước đầu tiên, chúng ta sẽ tải xuống mã nguồn và tạo dự án mới giản mới của dự án Laravel App bằng cách nhập một số lệnh sau.
composer create-project --prefer-dist laravel/laravel multipleUploadBước 2: Tạo Form Upload
Đầu tiên, tạo một form HTML cho phép người dùng chọn và upload nhiều file.
File: resources/views/files/upload.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Upload Multiple Files</title>
</head>
<body>
<h1>Upload Multiple Files</h1>
<form action="{{ route('files.upload') }}" method="POST" enctype="multipart/form-data">
@csrf
<label for="files">Choose files:</label>
<input type="file" name="files[]" multiple>
<button type="submit">Upload</button>
</form>
</body>
</html>
Tạo file view resources/views/files/index.blade.php để hiển thị danh sách file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Uploaded Files</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
<h3 class="mb-4">Danh sách file đã upload</h3>
@if($files->isEmpty())
<div class="alert alert-warning">Chưa có file nào được upload.</div>
@else
<table class="table table-bordered">
<thead>
<tr>
<th>#</th>
<th>Tên File</th>
<th>Thời Gian Upload</th>
<th>Hành Động</th>
</tr>
</thead>
<tbody>
@foreach($files as $file)
<tr>
<td>{{ $loop->iteration }}</td>
<td>{{ basename($file->filename) }}</td>
<td>{{ $file->created_at->format('d-m-Y H:i') }}</td>
<td>
<a href="{{ asset('storage/' . $file->filename) }}" class="btn btn-info btn-sm" target="_blank">Xem</a>
<form action="{{ route('files.delete', $file->id) }}" method="POST" style="display:inline;">
@csrf
@method('DELETE')
<button type="submit" class="btn btn-danger btn-sm">Xóa</button>
</form>
</td>
</tr>
@endforeach
</tbody>
</table>
@endif
</div>
</body>
</html>
2. Tạo Route
Thêm route để hiển thị form và xử lý upload.
File: routes/web.php
use App\Http\Controllers\FileUploadController;
Route::get('/upload', [FileUploadController::class, 'showForm'])->name('files.form');
Route::post('/upload', [FileUploadController::class, 'uploadFiles'])->name('files.upload');
Route::get('/files', [FileUploadController::class, 'showFiles'])->name('files.index');
Route::delete('/files/{file}', [FileUploadController::class, 'deleteFile'])->name('files.delete');
3. Tạo Controller
Tạo một controller để xử lý logic upload file.
Command:
php artisan make:controller FileUploadControllerFile: app/Http/Controllers/FileUploadController.php
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
use App\Models\File;
class FileUploadController extends Controller
{
// Hiển thị form upload
public function showForm()
{
return view('files.upload');
}
// Xử lý upload nhiều file
public function uploadFiles(Request $request)
{
// Validate các file
$request->validate([
'files.*' => 'required|file|mimes:jpg,jpeg,png,pdf|max:2048',
]);
// Lưu trữ các file
$uploadedFiles = $request->file('files');
$paths = [];
foreach ($uploadedFiles as $file) {
// Lưu file vào storage
$path = $file->store('uploads', 'public');
$paths[] = $path;
// Lưu thông tin vào database
File::create(['filename' => $path]);
}
return response()->json([
'message' => 'Files uploaded and saved to database successfully!',
'paths' => $paths,
]);
}
// Hiển thị danh sách file
public function showFiles()
{
// Lấy danh sách file từ database
$files = File::all();
// Trả về view với dữ liệu file
return view('files.index', compact('files'));
}
public function deleteFile(File $file)
{
// Xóa file khỏi storage
Storage::disk('public')->delete($file->filename);
// Xóa record trong database
$file->delete();
return back()->with('success', 'File deleted successfully.');
}
}
4. Cấu hình Storage
Đảm bảo rằng bạn đã cấu hình disk public trong file config/filesystems.php.
File: config/filesystems.php
'disks' => [
'public' => [
'driver' => 'local',
'root' => storage_path('app/public'),
'url' => env('APP_URL') . '/storage',
'visibility' => 'public',
],
],
Sau đó, chạy lệnh dưới đây để tạo symbolic link từ thư mục storage đến thư mục public:
php artisan storage:link
5. Tạo Database Qua Migration và Model
5.1. Cấu hình database
Mở file .env trong thư mục gốc của dự án Laravel và cập nhật thông tin database:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=laravel_upload
DB_USERNAME=root
DB_PASSWORD=Thay đổi DB_USERNAME và DB_PASSWORD phù hợp với cấu hình MySQL của bạn.
CREATE DATABASE laravel_upload;5.2. Tạo migration
Chạy lệnh tạo migration để tạo bảng lưu thông tin file:
php artisan make:migration create_files_table --create=filesMở file migration vừa tạo trong thư mục database/migrations (ví dụ: 2024_12_29_123456_create_files_table.php) và cập nhật nội dung như sau:
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
class CreateFilesTable extends Migration
{
public function up()
{
Schema::create('files', function (Blueprint $table) {
$table->id();
$table->string('filename');
$table->timestamps();
});
}
public function down()
{
Schema::dropIfExists('files');
}
}
Chạy lệnh để thực hiện migration:
php artisan migrate5.3. Tạo model
Chạy lệnh tạo model:
php artisan make:model FileMở file model vừa tạo trong app/Models/File.php và cập nhật nội dung như sau:
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class File extends Model
{
use HasFactory;
protected $fillable = ['filename'];
}
6. Kiểm tra Kết quả
Truy cập đường dẫn http://localhost/multipleUpload/upload để mở form upload.
Chọn nhiều file và nhấn “Upload”.
Các file sẽ được lưu trong thư mục storage/app/public/uploads.
Ngoài ra bạn có thể chạy dự án bằng cách đưa dự án multipleUpload vào Visual Studio Code sau đó mở terminal và chạy lệnh
php artisan serveSau khi chạy, bạn sẽ thấy thông báo tương tự như sau:
Starting Laravel development server: http://127.0.0.1:8000Mở trình duyệt web và truy cập địa chỉ:
http://127.0.0.1:8000/uploadKết luận
Trong bài này tôi đã hướng dẫn tổng quan cách để tạo chức năng upload multiple file(nhiều file) bằng Laravel.
Bạn cần xem qua để năm quy trình sau đó hãy tạo dự án theo từng bước đã được chia sẻ ở trên.
Nếu bạn muốn học lập trình web với Laravel hiệu quả để đi làm bạn có thể xem qua lộ trình Laravel Pro.
Nếu có câu hỏi gì thêm bạn chia sẻ ở phần comment bên dưới!