使用Ajax与Laravel上传文件后文件损坏问题求助

1. 修正Ajax请求的FormData处理 #

文件上传必须用FormData原生封装，禁止手动序列化或设置错误的请求头，否则会导致文件内容传输时被破坏。

正确的Ajax代码示例： #

const uploadBtn = document.getElementById('upload-btn');
const fileInput = document.getElementById('file-input');

uploadBtn.addEventListener('click', function(e) {
    e.preventDefault();
    
    const formData = new FormData();
    // 添加文件对象，必须用files[0]获取选中的文件
    formData.append('upload_file', fileInput.files[0]);
    // 附加其他表单字段（如果需要）
    formData.append('description', document.getElementById('desc').value);
    
    fetch('/api/upload', {
        method: 'POST',
        headers: {
            // Laravel必须的CSRF令牌
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        // 直接传递FormData，不要修改contentType，浏览器会自动处理multipart/form-data
        body: formData
    })
    .then(res => res.json())
    .then(data => console.log('上传成功:', data))
    .catch(err => console.error('上传失败:', err));
});

2. Laravel后端的正确处理逻辑 #

路由（routes/api.php 或 web.php）： #

use Illuminate\Http\Request;

Route::post('/api/upload', function(Request $request) {
    // 验证文件合法性
    $validated = $request->validate([
        'upload_file' => 'required|file|max:4096', // 限制4MB，可按需调整
    ]);

    $file = $request->file('upload_file');

    // 方案1：推荐存储文件到本地/云存储，仅存路径到数据库（避免数据库臃肿）
    $storagePath = $file->store('user_uploads', 'public'); // 存储到storage/app/public/user_uploads
    $fileUrl = asset('storage/' . $storagePath); // 生成可访问的URL

    // 方案2：若必须存文件二进制到数据库（不推荐大文件）
    $fileContent = file_get_contents($file->getRealPath()); // 读取原始二进制内容

    // 示例：保存到数据库（假设你有Upload模型）
    \App\Models\Upload::create([
        'file_name' => $file->getClientOriginalName(),
        'file_path' => $storagePath, // 方案1用这个
        'file_content' => $fileContent, // 方案2用这个
        'mime_type' => $file->getMimeType(),
        'description' => $request->description
    ]);

    return response()->json([
        'success' => true,
        'message' => '文件上传完成',
        'file_url' => $fileUrl
    ]);
});

3. 常见错误排查点 #

• 错误1：手动设置contentType
  禁止添加contentType: 'multipart/form-data'，浏览器会自动生成带boundary的请求头，手动设置会导致后端无法解析文件。
• 错误2：将FormData转为JSON
  文件是二进制数据，无法被JSON序列化，直接传递FormData对象即可。
• 错误3：后端错误获取文件
  必须用$request->file('upload_file')获取文件实例，不能用$request->input('upload_file')。
• 错误4：数据库字段类型错误
  若存二进制内容，数据库字段需设为BLOB或LONGBLOB，不能用VARCHAR或TEXT（会截断/转码内容）。

4. HTML表单示例 #

<form>
    <input type="text" id="desc" placeholder="文件描述">
    <input type="file" id="file-input" name="upload_file" accept=".pdf,.docx,.jpg">
    <button type="button" id="upload-btn">上传文件</button>
</form>
<!-- Laravel CSRF令牌，必须添加 -->
<meta name="csrf-token" content="{{ csrf_token() }}">

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