如何在Symfony LiveComponent中上传文件并携带其他表单数据？

当使用data-live-action-param="files|myAction"时，LiveComponent默认只会发送文件数据，不会自动包含其他表单字段，这就是你获取不到albumId的原因。以下是两种可行的解决方案：

方案一：使用live#submit提交完整表单 #

这种方式更符合LiveComponent的表单处理规范，自动包含所有表单数据和文件：

Twig代码修改 #

将表单字段包裹在正式的表单标签内，并使用live#submit触发提交：

{{ form_start(form) }}
    <div class="col">
        {{ form_row(form.dialogues.album.album_id,{'attr':{'id' : 'album-id'}}) }}
        {{ form_row(form.dialogues.images.image) }}
    </div>
    <button type="submit" data-action="live#submit">提交</button>
{{ form_end(form) }}

LiveComponent代码修改 #

利用LiveFormTrait简化表单数据处理：

use Symfony\Component\Form\FormInterface;
use Symfony\UX\LiveComponent\Form\LiveFormTrait;
use Symfony\UX\LiveComponent\Attribute\AsLiveComponent;

#[AsLiveComponent]
class YourComponent
{
    use LiveFormTrait;

    #[LiveForm]
    public FormInterface $form;

    public function submit(): void
    {
        $this->submitForm();
        $formData = $this->form->getData();
        
        $albumId = $formData['dialogues']['album']['album_id'];
        $imageFile = $formData['dialogues']['images']['image'];
        
        // 处理数据和文件逻辑
    }
}

方案二：保留live#action并手动包含表单数据 #

如果你想继续使用live#action，需要通过属性指定包含表单数据：

Twig代码修改 #

为表单添加ID，并在按钮上添加data-live-form属性：

<form id="exam-form">
    <div class="col">
        {{ form_row(form.dialogues.album.album_id,{'attr':{'id' : 'album-id'}}) }}
        {{ form_row(form.dialogues.images.image) }}
    </div>
    <button 
        data-action="live#action" 
        data-live-action-param="files|myAction"
        data-live-form="#exam-form"
    >
        提交
    </button>
</form>

LiveComponent代码 #

此时$request->request会包含完整的表单数据，你的原代码即可正常获取albumId：

$imageFile = $request->files->get('exam')['dialogues']['images']['image'];
$albumId = $request->request->get('exam')['dialogues']['album']['album_id'];

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