Vue.js+Laravel API图片上传失败：getClientOriginalName()调用报错

这个报错的核心原因很明确：你在Vue端把上传的File对象转换成了DataURL字符串，而Laravel期望接收的是原生的上传文件实例。当Laravel拿到字符串后，自然无法调用文件对象专属的getClientOriginalName()方法，于是触发了错误。下面是一步步的修复方案：

1. 修正Vue.js端的图片处理与上传逻辑 #

首先，你不需要把File对象转成DataURL（除非你需要做图片预览，那可以单独存预览地址，上传时依然用原File对象）。然后，上传文件必须使用FormData格式，而不是普通的JSON payload。

修改后的Vue代码如下：

<input type="file" accept="image/*" @change="doctorImageSelected(event)"> 
<button style="float: left;" class="ajmal-custom-btn" @click="goToUploadImage()">Upload</button>

doctorImageSelected(event) {
  // 直接保存原生File对象，不需要转DataURL
  this.image = event.target.files[0];
  
  // 如果需要预览图片，可以单独存预览地址（可选）
  // let reader = new FileReader();
  // reader.readAsDataURL(this.image);
  // reader.onload = (e) => {
  //   this.previewImage = e.target.result;
  // };
},
goToUploadImage() {
  const formData = new FormData();
  // 追加文件和ID到FormData中
  formData.append('pic', this.image);
  formData.append('id', this.id);

  this.$http.post(apiDomain + 'api/savePatientProfilePicture', formData, {
    // 手动指定请求头为multipart/form-data（部分axios封装会自动处理，可根据情况调整）
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
  .then(response => {
    if(response.status === 200){
      console.log(response);
    }
  })
  .catch((e) => {
    console.log(e);
  });
}

2. 修正Laravel端的接收与存储逻辑 #

你的Laravel代码有两个小问题：一是拼写错误（patinetImage应该是patientImage），二是return $picName放在了文件存储逻辑之前，导致后续代码不会执行。修改后的代码如下：

use Illuminate\Support\Facades\File;

public function savePatientProfilePicture(Request $request){
    // 先验证请求中是否包含有效文件
    if (!$request->hasFile('pic') || !$request->file('pic')->isValid()) {
        return response()->json(['error' => 'Invalid or missing image file'], 400);
    }
    
    $pictureInfo = $request->file('pic');
    $picName = $request->id . $pictureInfo->getClientOriginalName();
    $folder = "patientImage/";
    
    // 确保存储目录存在，避免报错
    if (!File::exists($folder)) {
        File::makeDirectory($folder, 0755, true);
    }
    
    $pictureInfo->move($folder, $picName);
    $picUrl = $folder . $picName;
    
    $patientPic = User::find($request->id);
    if ($patientPic) {
        $patientPic->image = $picUrl;
        $patientPic->save();
        return response()->json(['success' => true, 'image_url' => $picUrl]);
    }
    
    return response()->json(['error' => 'Patient not found'], 404);
}

额外注意事项 #

• 确保Laravel项目的storage和public目录有正确的读写权限，避免文件存储失败。
• 如果你的Vue项目用的是axios封装，有些版本会自动识别FormData并设置正确的请求头，这时候可以省略手动设置Content-Type的步骤。

内容的提问来源于stack exchange，提问作者Ajmal-Hossain