用类星体vue (前端)和laravel 9(后端)在s3上上传文件

Question

我正在构建一个平台，我需要上传资源(pdf，图片等)到亚马逊的s3桶。前端使用类星体vue制作，后端使用laravel 9，其思想是将文件从前端发送到后端，然后用Laravel在s3上上传文件。

问题是什么都没有发生，我的s3桶仍然是空的，没有错误或异常。

我不确定问题是将文件从前端发送到后端，还是从laravel上传到s3桶。

我使用Q-上传器(但我认为与类星体文件选择器没有太大的不同)。这是前端代码

<template>
  <q-page class="q-pa-sm">

    <q-uploader :factory="uploadFile"/>

  </q-page>
</template>

<script>
  import { api } from 'src/boot/axios';

  export default {
    methods: {
      uploadFile(f){
        var fileModel = f[0]
      
        const fileData = new FormData()

        fileData.append('file', fileModel)

        api.post('/api/resources/file', fileData, {
          headers: {
            'Content-Type': 'multipart/form-data'
          }
        })
        .then(res=>{
          console.log(res)
        })
      }
    }
  }
</script>

我在api.php上创建了API (我相信中间件不是问题)

Route::prefix('resources')->group(function(){

  /*
   * other APIs 
   */

  Route::post('/file',[ResourceController::class, 'postResourceFile'])->middleware('roles:1|2|3');

});

在laravel中，我有一个名为ResourceController.php的控制器，它的功能是

public function postResourceFile(Request $request){

  if($request->hasFile('file')){

    $file = $request->file('file');
    $name=time().$file->getClientOriginalName();
    $filePath = 'resources/' . $name;

    Storage::disk('s3')->put($filePath, file_get_contents($file));

    $response = [
      'file' => $file,
    ];
  } else {
    $response = [
      'message' => 'no file'
    ];
 }
 return response($response, 200);
}

在Laravel filesystems.php中，我没有更改原始配置

        's3' => [
            'driver' => 's3',
            'key' => env('AWS_ACCESS_KEY_ID'),
            'secret' => env('AWS_SECRET_ACCESS_KEY'),
            'region' => env('AWS_DEFAULT_REGION'),
            'bucket' => env('AWS_BUCKET'),
            'url' => env('AWS_URL'),
            'endpoint' => env('AWS_ENDPOINT'),
            'use_path_style_endpoint' => env('AWS_USE_PATH_STYLE_ENDPOINT', false),
        ],

这是我的.env AWS配置。

AWS_ACCESS_KEY_ID=myID
AWS_SECRET_ACCESS_KEY=myKey
AWS_DEFAULT_REGION=eu-central-1
AWS_BUCKET=myBucket
AWS_USE_PATH_STYLE_ENDPOINT=false
AWS_URL=http://s3.eu-central-1.amazonaws.com/myBucket

后端响应是

file:{}

但我不确定$file是空的还是只是浏览器的问题，因为文件应该类似于blob。

有人能帮我吗？提前感谢

Answer 1

文件是一个blob，不能很容易地转换为Json。我几乎肯定你的代码有效。要检查这一点，您可以记录文件：

Log::debug('file received => ', ['file' => $request->file('file')]);

再次检查laravel是否将该文件放入s3。我觉得你的做法可能不对。我的做法是：

// on the top:
use Illuminate\Http\File;
use Illuminate\Http\Request;

// on the function:
$file = new File($request->file('file'));
$path = Storage::disk('s3')->putFile('resources',  $file);

return response()->json(
  [
    'status' => 'success',
    "url" => Storage::url($path),
    'size' => Storage::size($path),
    'type' => $file->extension()
  ],
  200
 );