React+Laravel应用调用API上传文件请求为空报错500如何解决

前端错误点&修复代码 #

前端代码存在4处可直接触发该报错的问题：

• useState更新为异步操作，调用setSelectedFile后立即读取selectedFile无法拿到最新选中的文件
• fetch的body不能直接传入包含FormData的普通对象，必须直接传递FormData实例
• 手动指定Content-Type: multipart/form-data会丢失浏览器自动生成的表单分隔符（boundary），导致后端无法解析请求内容
• FormData内添加的文件键名为file，但后端读取的键名为image，键名不匹配

修复后的前端代码：

const formDa = new FormData();
// 直接读取当前选择的文件，不依赖useState的异步更新值
const selectedFile = imgRef.current.files[0];
// 调整键名和后端读取规则对应
formDa.append("image", selectedFile);
fetch("https://api.pharo-tech.xyz/store-image",{
  method:'POST',
  // 直接传入FormData实例作为请求体
  body : formDa,
  headers : {
    'Authorization': 'Bearer ' + token,
    'Accept' : 'application/json'
    // 移除手动设置的Content-Type，交由浏览器自动生成
  }
}).then(res=>res.json()).then(data=> console.log(data)).catch(e => console.log(e))

后端优化建议 #

原有后端代码缺少文件存在性校验，文件读取失败时直接调用方法就会抛出500错误，优化后代码：

public function store(Request $request) {
    // 先校验文件是否存在且合法
    if ($request->hasFile('image') && $request->file('image')->isValid()) {
        $file = $request->file('image');
        $fileName = mt_rand(100, 1000000000) . "." . $file->guessExtension();
        $file->storeAs('profile_images', $fileName);
        // 补充正常响应
        return response()->json(['status' => 'success', 'file_name' => $fileName]);
    }
    return response()->json(['status' => 'error', 'message' => '无效的文件请求'], 400);
}

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