Quasar Vue+Laravel9上传文件至AWS S3失败求助

一、先确认前后端文件传输是否正常 #

前端调试（Quasar Vue） #

在uploadFile方法中添加日志，确认文件是否正确封装进FormData，同时捕获请求错误：

uploadFile(f){
  // 先确认选中的文件存在
  if (!f.length) return console.error('未选中任何文件');
  var fileModel = f[0]
  
  console.log('选中的文件详情:', fileModel)
  
  const fileData = new FormData()
  fileData.append('file', fileModel)
  
  // 打印FormData内容，确认文件已添加
  for (let [key, value] of fileData.entries()) {
    console.log('FormData项:', key, value);
  }

  api.post('/api/resources/file', fileData, {
    headers: {
      'Content-Type': 'multipart/form-data'
    }
  })
  .then(res=>{
    console.log('后端返回:', res)
  })
  .catch(err=>{
    console.error('请求失败:', err.response || err) // 捕获并打印错误详情
  })
}

后端验证（Laravel） #

修改postResourceFile方法，添加日志记录，同时避免返回无法序列化的UploadedFile对象：

public function postResourceFile(Request $request){
  // 记录请求基础信息
  \Log::info('上传请求接收:', [
    'has_file' => $request->hasFile('file'),
    'request_files' => $request->files->all()
  ]);
  
  if($request->hasFile('file')){
    $file = $request->file('file');
    // 记录文件详细信息
    \Log::info('接收的文件详情:', [
      'original_name' => $file->getClientOriginalName(),
      'size' => $file->getSize(),
      'mime_type' => $file->getMimeType(),
      'is_valid' => $file->isValid()
    ]);
    
    $name = time() . $file->getClientOriginalName();
    $filePath = 'resources/' . $name;

    // 先尝试本地存储，排除S3问题
    // Storage::put('local_test/' . $name, file_get_contents($file));
    
    // 改用更稳定的流上传方式
    $uploadResult = Storage::disk('s3')->putFileAs('resources', $file, $name);
    
    // 验证S3是否上传成功
    if(Storage::disk('s3')->exists($filePath)){
      \Log::info('S3上传成功，路径：' . $filePath);
      $response = [
        'status' => 'success',
        'file_name' => $name,
        'file_path' => $filePath
      ];
    } else {
      \Log::error('S3上传失败，路径：' . $filePath);
      $response = [
        'status' => 'error',
        'message' => 'S3上传失败'
      ];
    }
  } else {
    \Log::warning('未接收到上传文件');
    $response = [
      'status' => 'error',
      'message' => 'no file'
    ];
 }
 return response()->json($response, 200);
}

注：之前返回file:{}是因为UploadedFile对象无法被JSON序列化，直接返回文件属性即可。

二、排查Laravel与S3的连接及上传问题 #

1. 验证AWS配置 #

• 检查.env中的AWS_ACCESS_KEY_ID和AWS_SECRET_ACCESS_KEY是否正确，确保该账号拥有s3:PutObject权限
• 移除AWS_URL配置，Laravel会自动根据region和bucket生成正确的访问地址
• 执行php artisan config:clear清除配置缓存，确保配置生效

2. 测试S3基础连接 #

添加临时测试路由，直接验证S3上传功能：

// 在routes/web.php中添加
Route::get('/test-s3', function(){
  $testContent = 'S3连接测试内容';
  $testPath = 'test/test_upload.txt';
  
  // 尝试上传测试内容
  Storage::disk('s3')->put($testPath, $testContent);
  
  if(Storage::disk('s3')->exists($testPath)){
    return 'S3连接正常，测试文件已上传：' . $testPath;
  } else {
    return 'S3连接失败，无法上传测试文件';
  }
});

访问该路由，确认S3基础功能是否正常。

3. 检查文件上传方式 #

替换原有的file_get_contents方式，使用Laravel提供的putFileAs方法，该方法直接处理文件流，避免大文件读取失败或权限问题。

三、其他排查点 #

• 中间件影响：暂时移除roles:1|2|3中间件，测试上传是否正常，排除权限拦截问题
• CORS配置：检查config/cors.php，确保允许multipart/form-data请求类型
• 本地存储权限：确认storage/app目录有写入权限，Laravel需要临时存储上传文件后再同步到S3

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