0

0

Phoenix LiveView如何实现XML文件的实时上传和预览

煙雲

煙雲

发布时间:2026-02-05 08:40:01

|

496人浏览过

|

来源于php中文网

原创

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

phoenix liveview如何实现xml文件的实时上传和预览

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 内容不一致。

苏打办公
苏打办公

360旗下的办公工具导航,优质海量工具

下载
  • allow_uploadaccept: "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/3String.replace( 手动转义关键符号
  • 渲染结构:用 JS Hook 把 documentElement 遍历生成 HTML 树(带缩进、颜色、可折叠),再挂载到指定 div,LiveView 只负责占位不参与渲染逻辑
  • 服务端返回的 @xml_preview 如果是 map 或 list,应来自前端 JSON.stringify(doc) 后发送,而非直接传 XML 字符串
LiveView 的响应式优势在文件上传场景里其实很有限,真正的“实时”发生在客户端 JS 层;LiveView 更适合作为状态协调器和上传通道,而不是 XML 解析引擎。别试图在 handle_event 里用 :xmerl 解析大 XML,也别依赖 uploaded_files 的 metadata 获取内容 —— 它们都不包含原始字节流。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

通义千问
通义千问

阿里巴巴推出的全能AI助手

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

426

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

540

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

313

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

78

2025.09.10

string转int
string转int

在编程中,我们经常会遇到需要将字符串(str)转换为整数(int)的情况。这可能是因为我们需要对字符串进行数值计算,或者需要将用户输入的字符串转换为整数进行处理。php中文网给大家带来了相关的教程以及文章,欢迎大家前来学习阅读。

564

2023.08.02

pdf怎么转换成xml格式
pdf怎么转换成xml格式

将 pdf 转换为 xml 的方法:1. 使用在线转换器;2. 使用桌面软件(如 adobe acrobat、itext);3. 使用命令行工具(如 pdftoxml)。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1914

2024.04.01

xml怎么变成word
xml怎么变成word

步骤:1. 导入 xml 文件;2. 选择 xml 结构;3. 映射 xml 元素到 word 元素;4. 生成 word 文档。提示:确保 xml 文件结构良好,并预览 word 文档以验证转换是否成功。想了解更多xml的相关内容,可以阅读本专题下面的文章。

2095

2024.08.01

xml是什么格式的文件
xml是什么格式的文件

xml是一种纯文本格式的文件。xml指的是可扩展标记语言,标准通用标记语言的子集,是一种用于标记电子文件使其具有结构性的标记语言。想了解更多相关的内容,可阅读本专题下面的相关文章。

1098

2024.11.28

抖音网页版入口与视频观看指南 抖音官网视频在线访问
抖音网页版入口与视频观看指南 抖音官网视频在线访问

本专题汇总了抖音网页版的入口链接、官方登录页面以及视频观看入口,帮助用户快速访问抖音网页版,提供免登录访问方式和直接进入视频播放页面的方法,确保顺利浏览和观看抖音视频。

61

2026.02.04

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Bootstrap 5教程
Bootstrap 5教程

共46课时 | 3.2万人学习

AngularJS教程
AngularJS教程

共24课时 | 3.3万人学习

CSS教程
CSS教程

共754课时 | 27.5万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号