Phoenix LiveView组件文件上传时清空其他表单字段问题求助

问题描述 #

我正在学习在Phoenix LiveView组件中实现文件上传，按照教程步骤操作后，遇到一个问题：当live_file_input放在表单内部时，选择图片会导致表单其他字段内容被清空，恢复为初始占位符状态；但把live_file_input移到表单外时就正常。

相关代码：
表单部分：

<div class="py-5">
   <%= label f, :image %>
   <%= live_file_input @uploads.avatar %>
</div>

组件的update函数：

@impl true
def update(assigns, socket) do
  {:ok, socket
  |> assign(assigns)
  |> assign(:uploaded_files, [])
  |> allow_upload(:avatar, accept: ~w(.jpg .jpeg), auto_upload: false)}
end

我猜测是LiveView组件状态被意外重置导致的，但不确定具体原因，求解决方案。

解决方案 #

问题出在你的update函数里——每次组件的assigns更新（比如选择文件时LiveView会触发update），你都会重置uploaded_files为空数组，并且重新调用allow_upload初始化上传配置，这会导致组件的状态（包括表单字段的输入状态）被意外覆盖。

修复步骤：

1. 将上传初始化逻辑移到mount函数
   mount只会在组件初始化时执行一次，避免每次update都重置状态：

@impl true
def mount(socket) do
  {:ok, socket
  |> assign(:uploaded_files, [])
  |> allow_upload(:avatar, accept: ~w(.jpg .jpeg), auto_upload: false)}
end

2. 简化update函数
   只合并新传入的assigns，保留组件已有的状态：

@impl true
def update(assigns, socket) do
  {:ok, assign(socket, assigns)}
end

3. 确保表单状态正确维护
   表单的输入状态（比如changeset）应该通过handle_event来更新并存储在socket的assigns中，而不是依赖外部传入的assigns。比如处理文本输入时：

@impl true
def handle_event("validate", %{"your_form" => params}, socket) do
  changeset = YourSchema.changeset(socket.assigns.changeset, params)
  {:noreply, assign(socket, :changeset, changeset)}
end

这样调整后，选择文件时就不会再清空其他表单字段了。

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