使用ES6与Laravel的FilePond多图上传分请求问题求助

问题 #

上传多张图片时，FilePond会将每个文件拆分为单独请求发送，导致后端为每张图片生成新文件夹，无法将所有图片存入同一目录。

现有代码 #

HTML输入字段 #

<input type="file" id="imgs" name="imgs" accept="image/jpeg"
   multiple
   data-allow-reorder="true"
   data-max-file-size="3MB"
   data-max-files="5"
>

Laravel控制器代码 #

public function saveTemp(Request $request)
{
    if ($request->only('imgs')) {
        $file = $request->file('imgs');
        $fileName = $file->getClientOriginalName();
        $folder = uniqid().'-'.now()->timestamp;
        $file->storeAs('admin/product/tmp-images/tmp-'.$folder, $fileName);

        return $folder;
    }

    return '';
}

解决多文件同目录存储问题 #

核心思路是让同一批次上传的文件共享同一个文件夹标识，后端根据这个标识存储文件：

1. 前端配置（传递批次标识） #

通过FilePond的JS配置，在第一个文件上传后获取返回的文件夹名，后续上传请求携带该标识：

FilePond.create(document.getElementById('imgs'), {
    server: {
        url: '/your-save-temp-endpoint', // 替换为你的实际接口地址
        process: {
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content
            },
            // 第一个文件上传后保存返回的文件夹名作为批次ID
            onload: function(response) {
                this.setMetadata('batchId', response);
            },
            // 后续上传请求附加批次ID
            ondata: function(formData) {
                const batchId = this.getMetadata('batchId');
                if (batchId) {
                    formData.append('batch_id', batchId);
                }
                return formData;
            }
        }
    }
});

2. 后端修改（复用批次文件夹） #

修改控制器逻辑，优先使用前端传入的batch_id，没有则生成新文件夹：

public function saveTemp(Request $request)
{
    if ($request->hasFile('imgs')) {
        $file = $request->file('imgs');
        $fileName = $file->getClientOriginalName();
        
        // 复用已有批次ID，无则生成新文件夹名
        $folder = $request->batch_id ?? uniqid().'-'.now()->timestamp;
        
        $file->storeAs('admin/product/tmp-images/tmp-'.$folder, $fileName);

        return $folder;
    }

    return '';
}

文件验证方案 #

FilePond的验证需结合前端配置和后端校验，确保数据安全：

前端验证（通过data属性配置） #

在HTML输入字段中补充更精确的验证规则：

<input type="file" id="imgs" name="imgs"
   multiple
   data-allow-reorder="true"
   data-max-file-size="3MB"
   data-max-files="5"
   data-accept-file-types="image/jpeg"
   data-file-validate-size-label="文件大小不能超过3MB"
   data-file-validate-type-label="仅支持JPEG格式图片"
>

后端验证（Laravel规则） #

在控制器中添加严格的文件验证逻辑：

public function saveTemp(Request $request)
{
    // 后端验证规则：必填、图片类型、JPEG格式、最大3MB
    $request->validate([
        'imgs' => 'required|image|mimes:jpeg|max:3072',
    ]);

    // 后续存储逻辑...
}

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