如何在Laravel中使用foreach处理Ajax上传的多文件数组

问题排查与修复步骤 #

1. 解决文件名重复覆盖问题

如果上传的文件存在同名情况，后续文件会直接覆盖已存储的同名文件，导致看起来只有第一个文件被保存。修改控制器代码，为每个文件生成唯一文件名：

// 需在控制器顶部引入File门面
use Illuminate\Support\Facades\File;

foreach ($request->file('photos') as $imagefile) {
    // 生成带时间戳的唯一文件名，避免覆盖
    $imageName = time() . '_' . $imagefile->getClientOriginalName();
    $imagePath = public_path('folder-path/');
    
    // 确保目标目录存在，不存在则递归创建
    if (!File::exists($imagePath)) {
        File::makeDirectory($imagePath, 0755, true);
    }
    
    $imagefile->move($imagePath, $imageName);
}

2. 确保正确获取请求中的文件数组

不要直接使用$request->photos，改用Laravel官方推荐的$request->file('photos')来获取上传的文件数组，这能更可靠地处理文件上传数据。

3. 补全Ajax请求的CSRF令牌

Laravel默认开启CSRF保护，Ajax请求如果未携带CSRF令牌，可能导致后续请求被拦截（虽第一个文件能保存，但必须补上以保证稳定性）。修改JS代码添加令牌：

function otherUpload(){
    var outputdata = [];
    var fileSelect = document.getElementById('files');
    var files = fileSelect.files;
    var formData = new FormData();
    
    // 添加CSRF令牌
    formData.append('_token', '{{ csrf_token() }}');

    for (var i = 0; i < files.length; i++) {
        var file = files[i];
        if (!file.type.match('image.*')) {
            continue;
        }
        formData.append('photos[]', file, file.name);
    }

    $.ajax({
        type: "POST",
        url: 'post-url',
        contentType: false,
        processData: false,
        dataType:'json',
        data: formData,
        success:function(data) {
            if(data.code == 1){
                console.log(data);
                fetchOtherImages();
            }
        },
        error: function(xhr) {
            // 打印错误信息方便排查
            console.log(xhr.responseText);
        }
    });
}

4. 检查目标文件夹权限

确保public/folder-path/目录有写入权限，Linux服务器可执行以下命令：

chmod -R 755 public/folder-path/
chown -R www-data:www-data public/folder-path/

5. 验证请求接收的文件数量

在控制器开头添加日志，确认接收到的文件总数：

use Illuminate\Support\Facades\Log;

Log::info('Received files count: ', ['count' => count($request->file('photos'))]);

查看storage/logs/laravel.log，确认是否接收到所有上传的文件。

内容的提问来源于stack exchange，提问作者Pasindu Hasanjaya Peiris