Laravel 8多图上传至MySQL与文件夹的问题解决需求

问题描述 #

使用Laravel 8框架，需要将多张图片同时存入MySQL数据库和服务器文件夹，但当前代码仅能存储单张图片。

原代码 #

Controller 代码 #

public function store(Request $request)
{
  $request->validate([
    'brand' => 'required|string|max:255',
    'model' => 'required|string|max:255',
    'type' => 'required|string',
    'status' => 'required|string',
    'location' => 'required|string',
    'seats' => 'required|integer',
    'year' => 'required|integer',
    'color' => 'required|string',
    'automatic' => 'required|string',
    'fuel_type' => 'required|string',
    'description' => 'nullable|string',
    'images.*' => 'image|mimes:jpeg,png,jpg,gif|max:2048', // 验证每张图片
]);

// 先在数据库创建车辆记录
$vehicle = Vehicle::create($request->only([
    'brand', 'model', 'type', 'status', 'location', 'seats', 'year', 'color', 'automatic', 'fuel_type', 'description'
]));

// 检查是否上传了图片
if ($request->hasFile('images')) {
    foreach ($request->file('images') as $image) {
        // 创建以车辆ID命名的文件夹
        $folderPath = 'vehicles/' . $vehicle->id;
        $imagePath = $image->store($folderPath, 'public');

        // 将每张图片存入数据库
        VehicleImage::create([
            'vehicle_id' => $vehicle->id,
            'path' => $imagePath, // 使用正确的列名
        ]);
    }
}


return redirect()->route('admin.vehicles.vehicles')->with('success', '车辆创建成功！');
}   

Blade 视图代码 #

<div class="card">
    <div class="card-header">
        <h3>车辆详情</h3>
    </div>
    <div class="card-body">
        <form action="{{ route('admin.vehicles.store') }}" method="POST" enctype="multipart/form-data">
            @csrf

            <div class="form-group">
                <label for="brand">品牌</label>
                <input type="text" name="brand" class="form-control" value="{{ old('brand') }}">
                @error('brand') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="model">型号</label>
                <input type="text" name="model" class="form-control" value="{{ old('model') }}">
                @error('model') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="type">车辆类型</label>
                 <select name="type" class="form-control">
               <option value="Economy class" {{ old('type') == 'Economy class' ? 'selected' : '' }}>经济舱</option>
                    <option value="Standard" {{ old('type') == 'Standard' ? 'selected' : '' }}>标准型</option>
                    <option value="SUV" {{ old('type') == 'SUV' ? 'selected' : '' }}>SUV</option>
                    <option value="Lux" {{ old('type') == 'Lux' ? 'selected' : '' }}>豪华型</option>
                    <option value="Convertibles" {{ old('type') == 'Convertibles' ? 'selected' : '' }}>敞篷车</option>
                     <option value="Van" {{ old('type') == 'Van' ? 'selected' : '' }}>厢式货车</option>
                      </select>
                @error('type') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="status">状态</label>
                <select name="status" class="form-control">
                    <option value="Available" {{ old('status') == 'Available' ? 'selected' : '' }}>可用</option>
                    <option value="Reserved" {{ old('status') == 'Reserved' ? 'selected' : '' }}>已预订</option>
                    <option value="In use" {{ old('status') == 'In use' ? 'selected' : '' }}>使用中</option>
                    <option value="In maintenance" {{ old('status') == 'In maintenance' ? 'selected' : '' }}>维护中</option>
                    <option value="Repairing the vehicle" {{ old('status') == 'Repairing the vehicle' ? 'selected' : '' }}>维修中</option>
                </select>
                @error('status') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="location">位置</label>
                <input type="text" name="location" class="form-control" value="{{ old('location') }}">
                @error('location') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="seats">座位数</label>
                <input type="number" name="seats" class="form-control" value="{{ old('seats') }}">
                @error('seats') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="year">年份</label>
                <input type="number" name="year" class="form-control" value="{{ old('year') }}">
                @error('year') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="color">车辆颜色</label>
                <input type="text" name="color" class="form-control" value="{{ old('color') }}">
                @error('color') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="automatic">变速箱</label>
                <select name="automatic" class="form-control">
                    <option value="Manual " {{ old('automatic') == 'Manual' ? 'selected' : '' }}>手动</option>
                    <option value="Automatic" {{ old('automatic') == 'Automatic' ? 'selected' : '' }}>自动</option>
                    
                </select>
                @error('automatic') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

            <div class="form-group">
                <label for="fuel_type">燃料类型</label>
                <input type="text" name="fuel_type" class="form-control" value="{{ old('fuel_type') }}">
                @error('fuel_type') <span class="text-danger">{{ $message }}</span> @enderror
            </div>


            <div class="form-group">
                <label for="description">描述</label>
                <textarea name="description" class="form-control">{{ old('description') }}</textarea>
                @error('description') <span class="text-danger">{{ $message }}</span> @enderror
            </div>

          
<div class="form-group">
    <label for="images">图片</label>
    <input type="file" name="images[]" class="form-control" id="imageInput" multiple>
    @error('images') <span class="text-danger">{{ $message }}</span> @enderror
    <div id="imagePreview" class="mt-3 d-flex flex-wrap"></div>
</div>

            <button type="submit" class="btn btn-primary">创建车辆</button>
        </form>
    </div>
</div>

<script>
   document.getElementById('imageInput').addEventListener('change', function(event) {
        let imagePreview = document.getElementById('imagePreview');

        for (let file of event.target.files) {
            let reader = new FileReader();
            reader.onload = function(e) {
                let imageContainer = document.createElement('div');
                imageContainer.style.position = "relative";
                imageContainer.style.display = "inline-block";
                imageContainer.style.marginRight = "10px";

                let imgElement = document.createElement('img');
                imgElement.src = e.target.result;
                imgElement.style.width = "150px";
                imgElement.style.height = "100px";
                imgElement.style.objectFit = "cover";
                imgElement.style.border = "1px solid #ddd";
                imgElement.style.borderRadius = "5px";

                let closeButton = document.createElement('span');
                closeButton.innerHTML = "&times;";
                closeButton.style.position = "absolute";
                closeButton.style.top = "5px";
                closeButton.style.right = "5px";
                closeButton.style.backgroundColor = "red";
                closeButton.style.color = "white";
                closeButton.style.borderRadius = "50%";
                closeButton.style.width = "20px";
                closeButton.style.height = "20px";
                closeButton.style.display = "flex";
                closeButton.style.justifyContent = "center";
                closeButton.style.alignItems = "center";
                closeButton.style.cursor = "pointer";
                closeButton.style.fontSize = "16px";
                
                closeButton.addEventListener('click', function() {
                    imageContainer.remove();
                });

                imageContainer.appendChild(imgElement);
                imageContainer.appendChild(closeButton);
                imagePreview.appendChild(imageContainer);
            };
            reader.readAsDataURL(file);
        }
    });
</script>

问题排查与修复方案 #

1. 配置 VehicleImage 模型批量赋值权限 #

代码中使用 VehicleImage::create() 进行批量赋值，但Laravel默认禁止未声明字段的批量写入。修改 VehicleImage 模型：

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

class VehicleImage extends Model
{
    use HasFactory;

    // 允许批量赋值的字段
    protected $fillable = ['vehicle_id', 'path'];
}

2. 完善图片验证规则（可选） #

如果需要强制用户上传至少一张图片，补充数组验证规则：

$request->validate([
    // 其他字段规则...
    'images' => 'required|array', // 确保图片数组存在且不为空
    'images.*' => 'image|mimes:jpeg,png,jpg,gif|max:2048',
]);

3. 修复视图错误提示逻辑 #

当前视图仅针对 images 字段提示错误，但验证规则是针对数组内的每个元素，修改为显示单张图片的错误：

<div class="form-group">
    <label for="images">图片</label>
    <input type="file" name="images[]" class="form-control @error('images.*') is-invalid @enderror" id="imageInput" multiple>
    @if ($errors->has('images'))
        <span class="text-danger">{{ $errors->first('images') }}</span>
    @endif
    @foreach ($errors->get('images.*') as $messages)
        @foreach ($messages as $message)
            <span class="text-danger d-block">{{ $message }}</span>
        @endforeach
    @endforeach
    <div id="imagePreview" class="mt-3 d-flex flex-wrap"></div>
</div>

4. 生成存储链接 #

使用 public 磁盘存储图片后，需要生成软链接才能访问图片：

php artisan storage:link

内容的提问来源于stack exchange，提问作者pape