Laravel 5后端单AJAX请求多文件上传问题求助（FormData实现）

我来帮你搞定Laravel 5下多文件AJAX上传的问题～先从前端到后端一步步排查优化：

首先补全前端容易遗漏的关键配置 #

你的前端代码框架没问题，但有个Laravel必加的点容易忘——CSRF令牌验证，另外可以优化文件字段的命名让后端更易处理：

// 先获取页面里的CSRF令牌（记得在HTML头部加<meta name="csrf-token" content="{{ csrf_token() }}">）
const csrfToken = $('meta[name="csrf-token"]').attr('content');
const fd = new FormData();

fd.append("data", JSON.stringify(values));
fd.append("page_id", page_id);

// 优化建议：用`files[]`作为文件字段名，后端直接拿数组，比`file_0`这种命名更省心
files.forEach(file => {
    fd.append("files[]", file);
});

$.ajax({
    type: 'POST',
    url: '/file_test',
    // 必须加CSRF请求头，否则Laravel会拒绝请求
    headers: {
        'X-CSRF-TOKEN': csrfToken
    },
    data: fd,
    contentType: false,
    processData: false,
    success: response => {
        console.log('上传成功！', response);
    },
    error: xhr => {
        console.error('上传失败', xhr.responseJSON);
    }
});

后端Laravel的接收与处理（控制器代码） #

接下来在控制器里正确接收请求、验证并存储文件：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class FileController extends Controller
{
    public function testUpload(Request $request)
    {
        // 第一步：验证请求参数合法性
        $validated = $request->validate([
            'page_id' => 'required|integer',
            'data' => 'required|json',
            'files.*' => 'required|file|mimes:jpg,png,pdf|max:2048' // 按需调整允许的文件类型和大小
        ]);

        // 第二步：解析JSON格式的data字段
        $data = json_decode($validated['data'], true);
        // 额外判断JSON解析是否成功
        if (json_last_error() !== JSON_ERROR_NONE) {
            return response()->json(['error' => '无效的JSON数据'], 400);
        }

        // 第三步：处理上传的文件
        $uploadedPaths = [];
        foreach ($request->file('files') as $file) {
            if ($file->isValid()) {
                // 存储到storage/app/public/uploads目录，可通过`php artisan storage:link`生成符号链接对外访问
                $path = $file->store('uploads', 'public');
                $uploadedPaths[] = $path;
            }
        }

        // 返回成功响应
        return response()->json([
            'message' => '文件全部上传完成',
            'page_id' => $validated['page_id'],
            'parsed_data' => $data,
            'uploaded_file_paths' => $uploadedPaths
        ]);
    }
}

如果你坚持用原有的file_0/file_1命名 #

要是不想改前端的字段名，后端可以循环读取文件：

// 替换上面的foreach部分
$uploadedPaths = [];
$index = 0;
while ($request->hasFile("file_{$index}")) {
    $file = $request->file("file_{$index}");
    if ($file->isValid()) {
        $path = $file->store('uploads', 'public');
        $uploadedPaths[] = $path;
    }
    $index++;
}

常见问题排查技巧 #

1. 打开浏览器开发者工具的「Network」面板，查看AJAX请求的FormData，确认所有字段和文件都已正确发送
2. 查看Laravel日志（storage/logs/laravel.log），排查是否有CSRF错误、文件权限错误或验证失败的信息
3. 确保storage目录有服务器写入权限，可执行chmod -R 755 storage/调整权限

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