Laravel Jetstream 环境下图片上传触发404错误如何修复？

404报错直接原因 #

你前端表单的action参数错误将完整User对象拼接到了URL中，Laravel会自动将User对象序列化为JSON字符串，导致实际请求的URL路径和你定义的/save-cache/{id}路由规则（id要求为数字）不匹配，因此触发404错误。

修复步骤 #

• 1. 修复前端视图代码 #

  主要修复3个问题：

  1. 路由参数仅传入用户ID，不要传入整个User对象，优先使用路由别名生成URL更稳定
  2. 补充Laravel POST请求必须的@csrf标签，否则后续会触发419页面过期错误
  3. 修正图片展示的src路径，补全用户缓存图片字段
     修复后代码：

  <form method="POST" action="{{ route('updatecache', auth()->id()) }}" enctype="multipart/form-data">
      @csrf
      <div>
          <input type="file" name="cache">
          <img class="image rounded-circle" src="{{ asset(auth()->user()->cache_photo_path ?? '默认占位图路径') }}" alt="cache_photo_path"> 
          <input type="submit" value="Save" >
      </div>
  </form>
  

• 2. 修复控制器逻辑错误 #

  原有控制器存在2个核心逻辑错误：

  1. 取上传文件时的字段名错误，你前端上传控件name为cache，不是storage/cache
  2. 文件存储路径直接写/cache/会写入服务器根目录，需要指定到项目public目录下才能正常访问
     额外补充旧文件删除、跳转回退逻辑，修复后代码：

  public function updatecache($id, Request $request){
      $validatedata = $request->validate([
          'cache' => ['nullable', 'mimes:jpg,jpeg,png', 'max:2048'],
      ]);
  
      $user = User::findOrFail($id);
  
      if($request->hasFile('cache')){
          // 先删除旧图片避免占用存储空间
          if ($user->cache_photo_path && file_exists(public_path($user->cache_photo_path))) {
              unlink(public_path($user->cache_photo_path));
          }
          $user_img = $request->file('cache');
          $name_gen = hexdec(uniqid()); 
          $image_ext = strtolower($user_img->getClientOriginalExtension());
          $image_name = $name_gen . '.' . $image_ext;
          $up_location = public_path('cache/');
          $last_img = '/cache/' . $image_name ;
          $user_img->move($up_location,$image_name);
          $user->cache_photo_path = $last_img;
      }
  
      $user->save();
      // 提交完成后跳转回上传页，可配合前端输出成功提示
      return back()->with('success', '缓存图片更新成功');
  }
  

• 3. 解决Jetstream下无法修改变量的问题 #

  Jetstream默认生成的User模型限制了可批量赋值的字段，你需要打开app/Models/User.php，将两个自定义图片字段加入$fillable数组：

  protected $fillable = [
      'name',
      'email',
      'password',
      'profile_photo_path',
      'cache_photo_path', // 新增缓存图片字段
      'companie_photo_path', // 另一个需要修改的图片字段也一起加入
  ];
  

• 4. 可选路由规范优化 #

  路由别名通常使用小写统一规范，不影响功能运行，调整示例：

  Route::post('/save-cache/{id}',[cachecompanyController::class, 'updatecache'])->name('updatecache');
  

内容的提问来源于stack exchange，提问作者Amine Ghandi