Laravel多文件上传：如何展示已上传的多文件？附示例数据

嘿，我来帮你搞定Laravel里多文件上传后的展示问题！先捋清楚核心逻辑：上传时我们把文件存在Laravel的存储目录，同时把文件的关键信息（路径、名称、类型等）存到数据库里，展示时就从数据库取路径，再对应到存储的文件就行。下面一步步来，附带示例代码和数据。

一、先搞定基础准备 #

1. 数据库表结构 #

首先得有个表来存上传文件的信息，比如创建uploads表：

Schema::create('uploads', function (Blueprint $table) {
    $table->id();
    $table->string('file_name'); // 原始文件名
    $table->string('file_path'); // 存储路径（相对路径）
    $table->string('mime_type'); // 文件MIME类型
    $table->unsignedBigInteger('size'); // 文件大小（字节）
    $table->timestamps();
});

2. 存储配置与软链接 #

如果要让文件能公开访问，推荐用Laravel的public磁盘。打开config/filesystems.php，确认public配置：

'public' => [
    'driver' => 'local',
    'root' => storage_path('app/public'),
    'url' => env('APP_URL').'/storage',
    'visibility' => 'public',
],

然后执行命令创建软链接，把storage/app/public链接到public/storage，这样前端就能访问到文件：

php artisan storage:link

二、上传时的存储逻辑（回顾） #

假设你已经有了多文件上传的控制器逻辑，这里给个示例，确保上传时把文件信息存到数据库：

// UploadController.php
public function store(Request $request)
{
    $request->validate([
        'files' => 'required|array|max:5',
        'files.*' => 'file|mimes:jpg,pdf,txt|max:2048',
    ]);

    foreach ($request->file('files') as $file) {
        // 存储文件到public磁盘，生成唯一文件名
        $path = $file->store('uploads', 'public');
        
        // 保存文件信息到数据库
        \App\Models\Upload::create([
            'file_name' => $file->getClientOriginalName(),
            'file_path' => $path,
            'mime_type' => $file->getMimeType(),
            'size' => $file->getSize(),
        ]);
    }

    return redirect()->back()->with('success', '文件上传成功！');
}

三、不同场景下的文件展示 #

1. 展示图片文件 #

直接用<img>标签，通过Storage::url()生成可访问的URL：

{{-- 视图文件：uploads/index.blade.php --}}
<h3>上传的图片</h3>
<div class="grid grid-cols-4 gap-4">
    @foreach($uploads->where('mime_type', 'like', 'image/%') as $image)
        @if(Storage::disk('public')->exists($image->file_path))
            <div class="border rounded p-2">
                <img src="{{ Storage::url($image->file_path) }}" 
                     alt="{{ $image->file_name }}" 
                     class="w-full h-40 object-cover rounded">
                <p class="text-sm mt-2">{{ $image->file_name }}</p>
            </div>
        @endif
    @endforeach
</div>

2. 展示可下载的文档（PDF、TXT等） #

用<a>标签，加上download属性实现直接下载，或者去掉download让浏览器在线预览：

<h3>可下载文档</h3>
<ul class="space-y-2">
    @foreach($uploads->where('mime_type', 'not like', 'image/%') as $document)
        @if(Storage::disk('public')->exists($document->file_path))
            <li class="border rounded p-3 flex justify-between items-center">
                <span>{{ $document->file_name }}</span>
                <a href="{{ Storage::url($document->file_path) }}" 
                   download="{{ $document->file_name }}"
                   class="px-3 py-1 bg-blue-500 text-white rounded">
                    下载
                </a>
            </li>
        @endif
    @endforeach
</ul>

3. 展示文件详情（大小、类型等） #

可以把文件的详细信息用表格展示，顺便把字节大小转成易读的KB/MB：

<h3>文件详情列表</h3>
<table class="w-full border-collapse">
    <thead>
        <tr class="bg-gray-100">
            <th class="border p-2">文件名</th>
            <th class="border p-2">类型</th>
            <th class="border p-2">大小</th>
            <th class="border p-2">操作</th>
        </tr>
    </thead>
    <tbody>
        @foreach($uploads as $upload)
            <tr>
                <td class="border p-2">{{ $upload->file_name }}</td>
                <td class="border p-2">{{ $upload->mime_type }}</td>
                <td class="border p-2">
                    {{ number_format($upload->size / 1024, 2) }} KB
                </td>
                <td class="border p-2">
                    @if(str_starts_with($upload->mime_type, 'image/'))
                        <a href="{{ Storage::url($upload->file_path) }}" target="_blank" class="text-blue-500">查看</a>
                    @else
                        <a href="{{ Storage::url($upload->file_path) }}" download class="text-green-500">下载</a>
                    @endif
                </td>
            </tr>
        @endforeach
    </tbody>
</table>

四、示例数据 #

假设数据库里有这些上传记录：

五、额外小技巧 #

• 文件存在性检查：用Storage::disk('public')->exists($path)判断文件是否还在存储中，避免前端出现404。
• 私有文件展示：如果文件是私密的（不能公开访问），可以写一个路由来返回文件响应：

  // routes/web.php
  Route::get('/download/{upload}', [UploadController::class, 'download'])->middleware('auth');
  
  // UploadController.php
  public function download(Upload $upload)
  {
      return Storage::disk('private')->download($upload->file_path, $upload->file_name);
  }
  

• 图片缩略图：可以用Intervention Image包生成缩略图，优化加载速度，比如：

  $img = Image::make($file->getRealPath())->resize(300, 200)->save(storage_path('app/public/thumbnails/'.$filename));
  

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