本文详细讲解如何在 Laravel API 中接收 Angular 前端提交的 Base64 编码图片，将其解码后存储至 storage/app/uploads/ 目录，并借助 storage:link 软链接生成可公开访问的完整图片 URL，同时优化响应数据结构以支持多张图片一并返回。

在开发 Laravel + Angular 前后端分离项目时，经常需要处理用户上传的多张图片（例如目的地照片），通过 API 接口接收 Base64 编码数据，安全存储后返回前端可直接访问的完整图片链接。本文提供一套经过生产环境验证的完整实施方案，帮助你高效解决这一需求。

✅ Laravel 正确接收与存储 Base64 图片（优化方案）

原始代码存在若干常见问题：Storage::put() 的路径拼接缺少斜杠分隔符、未对 Base64 格式进行有效性校验、也未处理空值或非法编码等异常情况。以下改进版本针对这些问题进行了全面优化：

use Illuminate\Support\Facades\Storage;
use Illuminate\Http\UploadedFile;

public function store(Request $request)
{
    $validator = Validator::make($request->all(), [
        'name' => 'required|string|max:100',
        'description' => 'required|string',
        'fileSource' => 'required|array|min:1',
        'fileSource.*' => 'string|starts_with:data:image/',
    ]);

    if ($validator->fails()) {
        return response()->json(['errors' => $validator->errors()], 422);
    }

    $destination = Destination::create([
        'name' => $request->name,
        'description' => $request->description,
    ]);

    $imageUrls = [];

    foreach ($request->fileSource as $base64String) {
        // 提取 MIME 类型并生成扩展名
        if (!preg_match('/^data:image\/(\w+);base64,/', $base64String, $matches)) {
            continue; // 跳过非法格式
        }

        $ext = strtolower($matches[1]);
        $ext = in_array($ext, ['jpeg', 'jpg', 'png', 'gif', 'webp']) ? $ext : 'png';
        $filename = uniqid() . '.' . $ext;

        // 解码并保存到 storage/app/uploads/destinations/
        $binaryData = base64_decode(substr($base64String, strpos($base64String, ',') + 1));
        $path = "uploads/destinations/{$filename}";
        Storage::put($path, $binaryData);

        // 关联记录
        DestinationImage::create([
            'destination_id' => $destination->id,
            'img' => $filename, // 仅存文件名，路径由 Storage::url 统一管理
        ]);

        $imageUrls[] = Storage::url($path); // 预生成 URL，便于调试
    }

    return response()->json([
        'message' => 'Destination added successfully',
        'destination_id' => $destination->id,
        'images' => $imageUrls,
    ], 201);
}

⚠️ 关键注意事项：

• Storage::put() 的第一个参数为相对路径（基于 storage/app/ 目录），务必确保目录层级准确无误，避免遗漏前导斜杠；
• 推荐使用 starts_with:data:image/ 规则验证 Base64 字符串的合法性，有效防范潜在注入风险；
• 切勿在循环内直接执行 return response()->json($url)，否则将仅返回第一张图片，后续图片数据全部丢失。

✅ Laravel 正确返回图片 URL：修复 view 方法

原始的 view() 方法存在两个关键问题：

1. return response()->json($url) 位于 foreach 循环内部，导致仅返回第一张图片后函数即终止；
2. Storage::url() 生成的是 /storage/xxx.png 形式的相对路径，必须通过 php artisan storage:link 创建软链接后，Web 服务器才能正常访问这些文件。

正确的实现方式如下：

public function view($id)
{
    $destination = Destination::with('destination_images')->findOrFail($id);

    $imageUrls = $destination->destination_images->map(function ($img) {
        return Storage::url("uploads/destinations/{$img->img}");
    })->values(); // 重置索引，返回纯数组

    return response()->json([
        'destination' => $destination,
        'images' => $imageUrls,
    ]);
}

? 必要系统配置（关键步骤）

1. 创建 public/storage 软链接（让 /storage/ 路径可以被 Web 访问）：

   php artisan storage:link

   ✅ 执行后，https://your-app.com/storage/uploads/destinations/xxx.png 就可以直接在浏览器中打开。

2. 确认 config/filesystems.php 中 public 磁盘配置正确（默认一般已启用）：

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

   ? Storage::url() 默认使用 public 磁盘，所以 url 配置必须指向 APP_URL . '/storage'。

? Angular 前端调用示例

前端收到响应数据后，可直接将图片 URL 绑定到 标签进行展示：

✅ Laravel 图片上传最佳实践总结

按照上述步骤操作，即可稳定实现 Laravel 后端接收、存储、分发 Base64 图片，并在 Angular 前端无缝展示，构建完整的前后端分离图片上传功能。