Laravel无法上传存储图片至本地与数据库问题求助

核心错误点 #

• AJAX未正确传递文件：直接取input的val()只能拿到文件名，无法传递文件二进制数据，必须用FormData对象
• PHP方法名不合法：PHP方法名不能用连字符，image-upload需改成驼峰/下划线格式
• 文件路径冗余：public_path()已指向项目public目录，再加/public会导致路径重复错误
• 方法名拼写错误：getClientOrginalName()应为getClientOriginalName()
• 验证规则错误：photo_filename.*是多文件上传规则，单文件场景不需要加.*
• 响应类型不匹配：AJAX期望JSON响应，但原控制器返回页面跳转，导致前端无反馈

修正后的代码 #

Blade.php 文件（新增input的name属性）

<form method='POST' action="{{ route('image-upload') }}" enctype="multipart/form-data">
   @csrf
   <div class="overflow-auto" style="padding-top:5%">
      <div class="p-3">
         <div class="card">
            <div class="card-body">
               <h4 class="card-title text-info"><strong> Attach your picture </strong></h4>
               <div class="row justify-content-center">
                  <div class="col-sm-12 col-lg-4">
                     <div class="form-group row">
                        <label for="step5_picture" class="col-sm-3 text-right control-label col-form-label">Please upload your photo here:</label>
                        <div class="col-sm-9">
                           <!-- 新增name属性，控制器靠此字段接收文件 -->
                           <input class="form-control" type="file" id='upload_picture' name="photo_filename">
                        </div>
                     </div>
                  </div>
               </div>
               <a href="/home" class="btn btn-lg waves-effect waves-light btn-success" id="btn-next" style="float:right;">Next</a>
               <button class="btn btn-lg waves-effect waves-light btn-info" id="btn-upload" style="float:right; margin-right:10px;">Upload</button>
            </div>
         </div>
      </div>
   </div>
</form>

Ajax 代码（改用FormData传递文件）

$("#btn-upload").click(function(e){
    e.preventDefault();
    // 创建FormData对象，自动包含表单内的文件和CSRF Token
    var formData = new FormData($(this).closest('form')[0]);

    $.ajax({
        type: "POST",
        url: "/image-upload",
        data: formData,
        // 必须设置这两个参数，避免jQuery自动处理导致文件格式损坏
        processData: false,
        contentType: false,
        dataType: "json",
        success: function (response) { 
            console.log(response.message);
            // 可在此处添加成功后的UI更新，比如预览头像
        },
        error: function(xhr){
            console.log(xhr.responseJSON.message);
        }
    }); 
});

Controller.php 文件（修正方法名、路径、拼写等）

// 方法名改为驼峰式，符合PHP命名规范
public function imageUpload(Request $request){
    $data = UserInfoModel::where('app_id', Session::get('loginId'))->first();
    // 单文件验证规则，移除多余的.*
    $validator = Validator::make($request->all(), [
        'photo_filename' => 'required|image|mimes:jpeg,png,jpg,svg|max:5000'
    ]);

    if($validator->fails()){
        return response()->json(['message' => $validator->errors()->first()], 400);
    }

    if($request->hasFile('photo_filename')){
        $photo = $request->file('photo_filename')->getClientOriginalName(); // 修正拼写错误
        $destination = public_path('image'); // 修正路径，避免重复public
        // 确保目标目录存在，不存在则递归创建
        if(!file_exists($destination)){
            mkdir($destination, 0755, true);
        }
        $request->file('photo_filename')->move($destination, $photo);
        
        // 更新数据库，保存文件名
        $data->update([
            'photo_filename' => $photo
        ]);
        
        return response()->json(['message' => 'Your image has been successfully uploaded!'], 200);
    }   
    return response()->json(['message' => 'No file uploaded'], 400);
}

Web.php 文件（对应修改控制器方法名）

// 控制器方法名改为imageUpload，与控制器内定义一致
Route::post('/image-upload',[CustomAuthController::class, 'imageUpload'])->name('image-upload');

学习要点 #

1. 文件上传基础：PHP中通过$request->file()获取上传文件，必须确保表单包含enctype="multipart/form-data"属性
2. AJAX文件上传：必须使用FormData对象，同时设置processData: false和contentType: false，避免jQuery自动处理破坏文件格式
3. PHP命名规范：类名、方法名遵循驼峰式，变量名用下划线，避免使用特殊字符
4. 路径处理：Laravel的public_path()、storage_path()等辅助函数可生成正确路径，避免手动拼接出错
5. 响应一致性：AJAX请求尽量返回JSON格式响应，方便前端统一处理成功/失败逻辑

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