Vue.js向Laravel发送嵌套图片数组遇问题：接收文件为空对象求解决方案

文件上传必须采用multipart/form-data编码格式，JSON无法携带文件数据。嵌套图片结构需要通过FormData的键名层级来实现，以下是具体实现步骤：

前端构建FormData示例（以原生JS为例） #

假设你有如下嵌套图片数据结构：

// 模拟前端的图片组数据，每个组包含主图和缩略图数组
const imageGroups = [
  {
    main: document.getElementById('main-img-0').files[0],
    thumbnails: [
      document.getElementById('thumb-0-0').files[0],
      document.getElementById('thumb-0-1').files[0]
    ]
  },
  // 更多图片组...
];

构建FormData并发送请求：

const formData = new FormData();
const csrfToken = document.querySelector('meta[name="csrf-token"]').content;

// 遍历图片组，按层级添加文件到FormData
imageGroups.forEach((group, groupIdx) => {
  // 添加主图，键名格式：image_groups[组索引][main]
  formData.append(`image_groups[${groupIdx}][main]`, group.main);
  
  // 添加缩略图数组，键名格式：image_groups[组索引][thumbnails][缩略图索引]
  group.thumbnails.forEach((thumb, thumbIdx) => {
    if (thumb) { // 跳过未选择的文件
      formData.append(`image_groups[${groupIdx}][thumbnails][${thumbIdx}]`, thumb);
    }
  });
});

// 发送POST请求到后端
fetch('/api/upload-nested-images', {
  method: 'POST',
  headers: {
    'X-CSRF-TOKEN': csrfToken
    // 不要手动设置Content-Type，浏览器会自动添加带boundary的正确头
  },
  body: formData
})
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));

Laravel后端接收与处理 #

在控制器中，Laravel会自动解析FormData的嵌套结构，直接通过$request->file()或请求对象属性获取文件：

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

class ImageUploadController extends Controller
{
    public function store(Request $request)
    {
        // 验证嵌套图片的规则
        $request->validate([
            'image_groups.*.main' => 'required|image|max:2048', // 主图必填，图片格式，最大2MB
            'image_groups.*.thumbnails.*' => 'nullable|image|max:1024' // 缩略图可选，最大1MB
        ]);

        // 遍历每个图片组处理文件
        foreach ($request->file('image_groups') as $group) {
            // 处理主图
            $mainImagePath = $group['main']->store('images/main', 'public');
            // 可将路径存入数据库：如 Image::create(['path' => $mainImagePath, ...])

            // 处理缩略图数组
            if (!empty($group['thumbnails'])) {
                foreach ($group['thumbnails'] as $thumbnail) {
                    $thumbPath = $thumbnail->store('images/thumbnails', 'public');
                    // 存储缩略图路径到数据库
                }
            }
        }

        return response()->json(['status' => 'success', 'message' => '图片上传完成']);
    }
}

关键注意事项 #

• 前端禁止手动设置Content-Type: multipart/form-data，缺失boundary会导致Laravel无法解析文件。
• FormData的键名必须使用[索引]格式（如image_groups[0][main]），确保Laravel能识别为嵌套数组。
• 验证规则使用*通配符匹配数组中的每个元素，对应嵌套结构的层级。

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