如何解决Nuxt3向Laravel9 REST API传图时请求丢失图片的问题

问题根源 #

1. 请求体格式错误：普通JS对象无法携带File类型数据，必须用FormData封装文件及表单字段才能实现文件上传。
2. 手动设置Content-Type导致解析失败：手动指定multipart/form-data会丢失浏览器自动生成的boundary分隔符，Laravel无法正确解析表单数据。
3. Laravel数据合并逻辑错误：原代码中[$request->all(), ...]会生成二维数组，不符合create()方法的参数要求。

修正后的前端代码（Nuxt3） #

// 将productData转换为FormData格式
const formData = new FormData();
Object.entries(productData.value).forEach(([key, value]) => {
  if (value != null) {
    formData.append(key, value);
  }
});

const submitResponse = await useFetch(`${config.API_BASE_URL}/products`, {
  method: 'POST',
  body: formData,
  headers: {
    Authorization: `Bearer ${userData.token}`
    // 移除手动设置的Content-Type，浏览器会自动添加包含boundary的正确头信息
  }
});

修正后的后端代码（Laravel 9） #

public function store(Request $request)
{
    $request->validate([
        "title" => "required|string",
        "initial_price" => "required|integer",
        "description" => "string",
        "sleeve_condition" => "exists:conditions,id",
        "media_condition" => "exists:conditions,id",
        "sku" => "string",
        "rating" => "integer",
        "product_type_id" => "exists:product_types,id",
        "author" => "string",
        "genre_id" => "exists:genres,id",
        "edition" => "string",
        "discount_id" => "sometimes|nullable|exists:discounts,id",
        "image" => "required|mimes:image/png,image/jpg,image/jpeg,image/webp|max:10000"
    ]);

    $path = $request->file('image')->store('images', 'public');

    // 使用array_merge合并请求数据与自定义字段，确保是一维数组
    return Product::create(array_merge(
        $request->all(),
        [
            "filename" => basename($path),
            "url" => Storage::disk('public')->url($path)
        ]
    ));
}

关键说明 #

• FormData的必要性：只有FormData能正确封装File对象，实现文件上传的二进制数据传输。
• 自动处理Content-Type：浏览器会根据FormData自动生成包含boundary的multipart/form-data头，确保后端能正确解析表单内容。
• 数组合并修正：array_merge将请求参数和自定义字段合并为一维数组，符合Eloquent模型create()方法的参数要求。

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