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 内容不一致。
-
allow_upload的accept: "application/xml,text/xml"只控制 MIME 类型,不保证内容合法 - 服务端收到上传后,建议只做基础校验(如文件大小、扩展名、是否为空),不做
File.stream!+:xmerl解析 —— 这既慢又容易崩溃 - 若必须服务端解析(如生成摘要或验证 schema),应在上传完成回调
handle_event("upload_finished", ...)中异步处理,避免阻塞 LiveView 进程
预览渲染时注意 XML 特殊字符和安全性
前端解析出的 XML 字符串或节点,不能直接用 Phoenix.HTML.Safe.to_iodata/1 插入模板,否则会转义失败或引发 XSS(比如 XML 中含 ...]]>)。必须明确区分“展示源码”和“渲染结构”两种模式。
- 展示源码:用
,但需先用<%= raw(@xml_preview) %>String.replace_leading/3和String.replace( 手动转义关键符号 - 渲染结构:用 JS Hook 把
documentElement遍历生成 HTML 树(带缩进、颜色、可折叠),再挂载到指定div,LiveView 只负责占位不参与渲染逻辑 - 服务端返回的
@xml_preview如果是 map 或 list,应来自前端JSON.stringify(doc)后发送,而非直接传 XML 字符串
handle_event 里用 :xmerl 解析大 XML,也别依赖 uploaded_files 的 metadata 获取内容 —— 它们都不包含原始字节流。










