在 Laravel 10 中掌握多个图像上传：简单的一步一步
在本教程中，您将学习如何使用内置的验证和存储功能在 Laravel 10 中上传多个图像。您还将了解如何在网页上显示上传的图像。
第 1 步：创建 Laravel 项目
运行以下命令创建 laravel 项目。
composer create-project laravel/laravel project_name
现在，您必须将 laravel 应用程序连接到数据库，因此打开 .env 配置文件并添加数据库凭据，如下所示。
.env
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database_name
DB_USERNAME=database_user_name
DB_PASSWORD=database_password
第 2 步：安装 Laravel Breeze
通过 Composer 安装 Laravel Breeze：
composer require laravel/breeze --dev
接下来，运行以下命令。
php artisan breeze:install
以及最终安装依赖项
npm install && npm run dev
php artisan migrate
第3步：创建博客模态迁移和控制器
运行以下命令来创建模型、迁移和控制器
php artisan make:model Blog -mcr
对于多个图像，给出长文本的文本方法并存储多个图像。
创建博客表.php
<?php
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
return new class extends Migration
{
/**
* Run the migrations.
*/
public function up(): void
{
Schema::create('blogs', function (Blueprint $table) {
$table->id();
$table->string('title');
$table->text('images')->nullable();
$table->timestamps();
});
}
/**
* Reverse the migrations.
*/
public function down(): void
{
Schema::dropIfExists('blogs');
}
};
对于多个图像，将图像转换为数组。
应用程序/模型/Blog.php
<?php
namespace App\Models;
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
class Blog extends Model
{
use HasFactory;
protected $fillable = [
'title',
'images'
];
protected $casts = [
'images' => 'array'
];
}
网页.php
Route::resource('blogs', BlogController::class);
我们将以数组格式存储多个图像。首先，您需要创建空数组并为每个数组运行您也可以$request->hasFile('image')
应用程序/Http/Controllers/BlogController.php
<?php
namespace App\Http\Controllers;
use App\Models\Blog;
use Illuminate\Http\Request;
class BlogController extends Controller
{
/**
* Display a listing of the resource.
*/
public function index()
{
$blogs = Blog::all();
return view('blogs.index', compact('blogs'));
}
/**
* Show the form for creating a new resource.
*/
public function create()
{
return view('blogs.create');
}
/**
* Store a newly created resource in storage.
*/
public function store(Request $request)
{
$data = $request->validate([
'title' => 'required|string|max:255',
'images' => 'required|array'
]);
$images = [];
foreach ($data['images'] as $image) {
$fileName = uniqid() . '.' . $image->getClientOriginalExtension();
$image_path = $image->storeAs('images', $fileName, 'public');
array_push($images, $image_path);
}
$data['images'] = $images;
Blog::create($data);
return redirect()->route('blogs.index');
}
/**
* Display the specified resource.
*/
public function show(Blog $blog)
{
//
}
/**
* Show the form for editing the specified resource.
*/
public function edit(Blog $blog)
{
//
}
/**
* Update the specified resource in storage.
*/
public function update(Request $request, Blog $blog)
{
//
}
/**
* Remove the specified resource from storage.
*/
public function destroy(Blog $blog)
{
//
}
}
第四步：存储链接图片
运行以下命令来链接您的公共存储。
php artisan storage:link
第 5 步：创建博客刀片视图文件
您需要添加 enctype="multipart/form-data" 在 表单中还给出数组中的图像名称images[]并添加接受多输入
视图/博客/create.blade.php
<x-app-layout>
<x-slot name="header">
<h2 class="text-xl font-semibold leading-tight text-gray-800">
{{ __('Blog Create') }}
</h2>
</x-slot>
<div class="py-12">
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="overflow-hidden bg-white shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200">
<form method="POST" action="{{ route('blogs.store') }}" enctype="multipart/form-data">
@csrf
<div class="mb-6">
<label class="block">
<span class="text-gray-700">Title</span>
<input type="text" name="title" class="block w-full @error('title') border-red-500 @enderror mt-1 rounded-md" placeholder="" value="{{old('title')}}" />
</label>
@error('title')
<div class="text-sm text-red-600">{{ $message }}</div>
@enderror
</div>
<div class="mb-4">
<label class="block">
<span class="text-gray-700">Images</span>
<input type="file" name="images[]" class="block w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-blue-50 file:text-blue-700 hover:file:bg-blue-100" multiple />
</label>
@error('images')
<div class="text-sm text-red-600">{{ $message }}</div>
@enderror
</div>
<x-primary-button class="ml-3">
{{ __('Submit') }}
</x-primary-button>
</form>
</div>
</div>
</div>
</div>
</x-app-layout>
有多种方法可以显示多个图像。我们将使用多个foreach
视图/博客/index.blade.php
<x-app-layout>
<x-slot name="header">
<h2 class="text-xl font-semibold leading-tight text-gray-800">
{{ __('Blogs Index') }}
</h2>
</x-slot>
<div class="py-12">
<div class="mx-auto max-w-7xl sm:px-6 lg:px-8">
<div class="overflow-hidden bg-white shadow-sm sm:rounded-lg">
<div class="p-6 bg-white border-b border-gray-200">
<div class="mt-1 mb-4">
<a class="px-2 py-2 text-sm text-white bg-blue-600 rounded" href="{{ route('blogs.create') }}">{{ __('Add Images') }}</a>
</div>
<div class="relative overflow-x-auto shadow-md sm:rounded-lg">
<table class="w-full text-sm text-left text-gray-500 dark:text-gray-400">
<thead class="text-xs text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" class="px-6 py-3">
#
</th>
<th scope="col" class="px-6 py-3">
Title
</th>
<th scope="col" class="px-6 py-3">
Image
</th>
</tr>
</thead>
<tbody>
@foreach ($blogs as $blog)
<tr class="bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row" class="px-6 py-4 font-medium text-gray-900 dark:text-white whitespace-nowrap">
{{$blog->id}}
</th>
<td class="px-6 py-4">
{{$blog->title}}
</td>
<td class="flex gap-4 px-6 py-4">
@foreach($blog->images as $image)
<img src="{{ asset('/storage/' . $image) }}" alt="multiple image" class="w-20 h-20 border border-blue-600">
@endforeach
</td>
</tr>
@endforeach
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</x-app-layout>
1.45 GEEK