Laravel+Vue多图上传报错：Call to a member function getClientOriginalName() on array

问题根源 #

你在Vue端构建FormData时，错误地传递文件名而非文件对象给后端，导致Laravel收到的$request->images是包含文件名的二维数组，而非UploadedFile实例数组，因此调用getClientOriginalName()方法时触发错误。

修复步骤 #

1. 修正Vue代码 #

（1）文件输入框添加multiple属性（可选，支持批量选文件）

<input type='file' multiple @change="selectFile" />

（2）修正selectFile方法（兼容单/多文件选择）

selectFile(e) {
  // 将选中的所有文件添加到images数组
  Array.from(e.target.files).forEach(file => {
    this.images.push(file);
  });
}

（3）修正publishAd方法的FormData构建逻辑

关键是把文件对象直接append到images[]，而非传递文件名：

publishAd() {
  let formData = new FormData();
  this.images.forEach((file) => {
    formData.append('images[]', file);
  });
  axios.post('/common/publish-ad', formData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  }).then((response) => {
    console.log(response.data);
  })
},

2. 修正Laravel控制器代码 #

添加文件有效性校验，确保处理合法的上传文件：

$images = [];
// 先判断是否存在上传文件且为数组
if ($request->hasFile('images') && is_array($request->images)) {
    $i = 0;
    foreach ($request->images as $file) {
        // 校验单个文件是否有效
        if ($file->isValid()) {
            $originalName = $file->getClientOriginalName();
            $fileNameParts = explode('.', $originalName);
            $fileName = $fileNameParts[0] . time() . $i . '.' . $fileNameParts[1];
            // 使用storage_path指定绝对路径，避免路径问题
            $file->move(storage_path('app/public/Ad_list'), $fileName);
            // 若需前端访问，执行php artisan storage:link创建软链接
            $images[] = $fileName;
            $i++;
        }
    }
}

// 保存到数据库
$ad['photos'] = implode(",", $images);
$ad->save();

额外说明 #

• 执行php artisan storage:link可让storage/app/public目录下的文件通过/storage路径访问，方便前端展示图片。
• 若不需要批量选文件，可移除input的multiple属性，但需保证selectFile方法添加的是文件对象。

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