如何使用Flutter通过Laravel API上传未压缩的文件夹？

这个需求完全可以实现，核心是利用浏览器原生的文件夹选择能力配合 Laravel 的文件处理机制，分前端和后端两部分落地：

前端实现（原生 JS 示例） #

浏览器原生支持文件夹选择，给 input 标签添加webkitdirectory属性即可让用户直接选择整个文件夹。之后需要遍历文件夹内所有文件（包括子目录中的文件），保留文件相对路径，再通过 FormData 提交到 Laravel API。

示例代码：

<input type="file" id="folderInput" webkitdirectory multiple>
<button onclick="uploadFolder()">上传文件夹</button>

<script>
async function uploadFolder() {
    const input = document.getElementById('folderInput');
    const formData = new FormData();

    // 遍历选中的所有文件，包含子目录文件
    for (const file of input.files) {
        // 获取文件相对于选中文件夹的路径
        const relativePath = file.webkitRelativePath;
        // 将文件和对应路径加入 FormData
        formData.append('files[]', file);
        formData.append('paths[]', relativePath);
    }

    // 发送请求到 Laravel API
    const response = await fetch('/api/upload-folder', {
        method: 'POST',
        headers: {
            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
        },
        body: formData
    });

    const result = await response.json();
    console.log(result);
}
</script>

Laravel 后端实现 #

1. 添加 API 路由
   在routes/api.php中配置路由：

Route::post('/upload-folder', [FolderUploadController::class, 'store']);

2. 编写控制器处理逻辑
   创建FolderUploadController，接收前端传递的文件和路径，按原结构重建文件夹并保存文件：

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

class FolderUploadController extends Controller
{
    public function store(Request $request)
    {
        // 验证文件合法性
        $request->validate([
            'files.*' => 'required|file|max:10240', // 单文件限制10MB，可按需调整
        ]);

        $files = $request->file('files');
        $paths = $request->input('paths');

        foreach ($files as $index => $file) {
            $relativePath = $paths[$index];
            // 自动创建不存在的目录，保存文件
            Storage::putFileAs(
                dirname($relativePath),
                $file,
                basename($relativePath)
            );
        }

        return response()->json([
            'message' => '文件夹上传完成',
            'uploaded_count' => count($files)
        ], 200);
    }
}

关键注意事项 #

• 路径还原：前端传递的webkitRelativePath包含文件在原文件夹中的完整层级，后端通过dirname()和basename()拆分路径，确保原文件夹结构被准确重建。
• 存储权限：确保 Laravel 配置的存储磁盘（如 public、s3）具备足够的写入权限，避免保存失败。
• 大文件优化：若文件夹包含超大文件或大量文件，建议实现分片上传逻辑，避免请求超时。
• 跨域处理：前后端跨域时，需在 Laravel 中配置 CORS（可通过fruitcake/laravel-cors包快速实现）。
• 权限控制：给路由添加身份验证中间件（如auth:sanctum），防止未授权用户上传文件。

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