Phoenix LiveView如何实现XML文件的实时上传和预览-XML/RSS教程

LiveView 原生不支持客户端直接解析 XML，需用 JS Hook 在上传前通过 FileReader 和 DOMParser 预览；服务端仅做透传校验，避免用 :xmerl 解析；预览渲染须区分源码展示（手动转义后 raw）与结构渲染（JS 生成 HTML）。

LiveView 里上传 XML 文件的核心限制

LiveView 原生不支持直接读取客户端文件内容（比如用 FileReader 解析 XML 字符串），因为它的上传机制基于 allow_upload + 服务端临时存储，文件内容不会自动暴露给前端 JS 或 LiveView 状态。想“实时预览”，必须绕过纯 LiveView 流程，在客户端先解析。

用 JS Hook 在上传前解析 XML 并预览

这是最可行的路径：用户选中文件后，不立即触发 LiveView 上传，而是用 handleInput 拦截 ，用 FileReader 同步读取并解析 XML，再把结构化数据（如 DOM 或 JSON）传给 LiveView 更新预览区域。

• Hook 名必须匹配 LiveView 中定义的 phx-hook 属性，例如 phx-hook="XMLPreview"
• 在 mounted() 里监听 input[type="file"] 的 change 事件
• 用 new DOMParser().parseFromString(content, "application/xml") 解析，检查 parsererror 元素判断是否格式错误
• 解析成功后调用 this.pushEvent("xml_preview", { xml: content }) 把原始字符串发给 LiveView（注意：不是 DOM 对象，LiveView 不认）

def handle_event("xml_preview", %{"xml" => xml}, socket) do
  case parse_xml_preview(xml) do
    {:ok, doc} -> {:noreply, assign(socket, :xml_preview, doc)}
    {:error, msg} -> {:noreply, assign(socket, :xml_error, msg)}
  end
end

允许上传但跳过服务端解析，只做透传校验

如果后续还需正式上传（比如存到 S3 或数据库），不要在 handle_event 里重复解析 XML —— 应该让 LiveView 的 allow_upload 走标准流程，仅用于传输和校验，实际解析仍由前端完成。否则会因编码、换行、BOM 等问题导致前后端 XML 内容不一致。