PHP/Laravel中动态添加部件表单的多文件关联处理问题

当前表单支持动态添加多个部件录入区域，但每个部件的文件上传字段使用dynamic[files][]命名，导致所有上传文件被合并到一个一维数组中，后端无法区分哪些文件属于哪个部件。例如部件1传2个文件、部件2传3个文件时，后端循环部件索引只能拿到数组对应位置的单个文件，剩余文件无法匹配归属。

错误原因 #

所有文件字段使用相同的dynamic[files][]命名，浏览器会将所有文件按上传顺序放入同一个数组，没有保留部件的分组关系，后端无法通过部件索引对应到该部件的全部文件。

解决方法：给每个部件的表单字段加上明确的索引 #

通过给每个部件的所有表单字段（包括文件上传）添加部件索引，让后端能按索引分组获取每个部件的所有数据，包括对应的文件。

1. 修改初始HTML表单 #

将初始部件的字段name从dynamic[name][]改为dynamic[0][name]，以此类推，明确第一个部件的索引为0：

<div class="part-form">
    <h3 class="part-name">Part 1</h3>

    <div class="form-group">
        <label for="part_name">Part Name</label>
        <input type="text" name="dynamic[0][name]" class="form-control part-name textbox"/>
    </div>

    <div class="form-group">
        <label for="project-quantity">Quantity Needed</label>
        <input type="number" name="dynamic[0][quantity]" id="project-quantity" class="textbox form-control" min="1"/>
    </div>

    <div class="form-group">
        <label for="files">Upload File(s)</label>
        <input type="file" name="dynamic[0][files][]" id="files" class="file form-control" multiple accept=".pdf, .doc, .stp, .step, .stl" />
    </div>
</div>

<button type="button" class="dynamic-add" onclick="addDynamicForm()">Add Another Part</button>

2. 修改JavaScript动态添加逻辑 #

新增部件时，使用当前部件的数量作为索引（比如现有n个部件，新增的索引就是n），确保每个部件的字段都带有对应的索引：

<script type="text/javascript">
    function addDynamicForm() {
        var numParts = $(".part-form").size();
        var newNumber = numParts + 1;
        var partIndex = numParts; // 新增部件的索引

        var form = `
            <div class="part-form">
                <h3 class="part-name">Part ${newNumber}</h3>

                <div class="form-group">
                    <label for="part_name">Part Name</label>
                    <input type="text" name="dynamic[${partIndex}][name]" class="form-control part-name textbox"/>
                </div>

                <div class="form-group">
                    <label for="project-quantity">Quantity Needed</label>
                    <input type="number" name="dynamic[${partIndex}][quantity]" class="textbox form-control" min="1"/>
                </div>

                <div class="form-group">
                    <label for="files">Upload File(s)</label>
                    <input type="file" name="dynamic[${partIndex}][files][]" class="file form-control" multiple accept=".pdf, .doc, .stp, .step, .stl" />
                </div>
            </div>
        `;

        $(".part-form").last().after(form);
    }
</script>

注意：移除了重复的id="project-quantity"和id="files"，因为DOM中id必须唯一，重复id会导致后续操作异常。

3. 修改后端Laravel/PHP处理逻辑 #

现在$request->dynamic是一个按索引分组的数组，每个元素包含对应部件的name、quantity和files，直接遍历即可获取每个部件的全部文件：

$returnString = "";
$parts = $request->input('dynamic');
$userID = auth()->id(); // 假设用户ID通过认证获取

foreach ($parts as $key => $part) {
    $partID = uniqid('part-');
    $partName = $part['name'];
    $partQuantity = $part['quantity'];
    $uploadedFiles = $request->file("dynamic[{$key}][files]") ?? [];

    foreach ($uploadedFiles as $file) {
        if ($file->isValid()) {
            $returnString .= "File is valid.<br/>";

            $originalName = $file->getClientOriginalName();
            $extension = $file->getClientOriginalExtension();
            $filename = uniqid()."_".time().".".$extension;

            $file->storeAs("uploads/{$userID}", $filename, "public");    
        } else {
            $returnString .= "File is not valid.<br/>";
        }
    }
}

echo $returnString;

说明：使用循环的$key对应前端的部件索引，从而准确获取该部件的所有上传文件；同时增加了?? []处理没有上传文件的情况，避免报错。

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