Vue2.6+Laravel8.5（Docker环境）上传图片到public目录失败如何解决？

1. 前端Axios配置错误（最可能的核心问题） #

你手动指定了Content-Type: multipart/form-data但没有携带边界值boundary，会导致后端无法正确解析FormData格式的请求体，自然就拿不到上传的图片文件。
Axios在检测到请求体是FormData对象时，会自动生成带正确boundary的Content-Type请求头，不需要手动设置。
修改后的前端代码如下：

this.productImages.forEach( image => {
    let data = new FormData()
    data.set('image', image.file)
    console.log(image.file)
    // 去掉手动设置的headers即可
    axios.post('/api/image', data)
        .then( response => {
            console.log( response.data.status )
            this.uploading.status = "Images uploading."
        })
        .catch( errors => {
            console.log("uploading error")
        })
});

你控制台打印的image.file是标准的File对象，格式完全正常，前端文件读取环节没有问题。

2. 后端Laravel文件获取逻辑错误 #

不要用普通请求参数的方式获取上传文件，必须用Laravel提供的file()方法读取，同时先判断文件是否上传成功，再执行后续操作：

// 先判断是否有上传的文件
if ($request->hasFile('image')) {
    $image = $request->file('image');
    // 先判断目标目录是否存在，不存在则创建，权限设置为755
    $uploadPath = public_path('images/uploads');
    if (!file_exists($uploadPath)) {
        mkdir($uploadPath, 0755, true);
    }
    // 保存文件，建议保留原文件后缀
    $fileName = "testName." . $image->getClientOriginalExtension();
    $image->move($uploadPath, $fileName);
} else {
    // 打日志确认是否拿到文件，方便调试
    \Log::info('未接收到上传的image文件', $request->all());
}

3. 权限问题排查 #

如果修改完上述代码还是报500错误，检查public/images/uploads目录的写入权限：

• Linux环境下需要确保web服务运行用户（通常是www-data、nginx等）对该目录有读写权限，可以执行chmod -R 755 public/images临时验证是否是权限问题。
• 可以查看Laravel的storage/logs/laravel.log文件里的500错误栈信息，能直接定位具体报错原因。

内容的提问来源于stack exchange，提问作者Matej Lukáč