0

0

如何构建一个支持拖拽上传的XML到JSON转换器

煙雲

煙雲

发布时间:2026-02-08 05:27:21

|

979人浏览过

|

来源于php中文网

原创

拖拽上传与XML→JSON转换应解耦,用FileReader读取XML文件并显式指定UTF-8编码,配合fast-xml-parser解析,需配置ignoreAttributes、parseAttributeValue等参数,校验合法性并处理命名空间、重复元素、空标签等特性,同时防范XXE、深度嵌套等安全风险。

如何构建一个支持拖拽上传的xml到json转换器

拖拽上传本身和 XML→JSON 转换是两个独立能力,强行耦合在单页里容易出错——尤其当 XML 文件较大、含命名空间或 DTD 时,浏览器直接解析可能失败,XMLHttpRequestfetch 读取后交由 JS 解析器处理更可控。

FileReader 读取拖拽的 XML 文件

拖拽区域监听 drop 事件后,必须阻止默认行为,否则浏览器会跳转到文件地址;拿到 File 对象后只能用 FileReader 读取为字符串(不能直接 JSON.parse),且需注意编码——XML 声明里的 encoding 属性常被忽略,实际应统一按 UTF-8 处理(除非明确知道是 GBK 等):

const reader = new FileReader();
reader.onload = (e) => {
  const xmlString = e.target.result; // 此处是纯字符串,非 DOM
  try {
    const json = xml2js(xmlString); // 后续解析函数
    outputJson(json);
  } catch (err) {
    console.error("XML 解析失败:", err.message);
  }
};
reader.readAsText(file, "UTF-8"); // 显式指定编码,避免乱码
  • 不要用 reader.readAsDataURL(),base64 会增大体积且增加解码步骤
  • file.type 不可靠(可能为空或伪造),以内容为准;但可初步过滤:if (!file.name.endsWith(".xml"))
  • 大文件(>10MB)建议加 loading 状态,FileReader 无进度事件,无法实时反馈

选择轻量 XML 解析器:避开 xml2js 和 DOMParser

DOMParser 在浏览器中解析 XML 会受同源策略和 DTD 禁用限制(如含 !DOCTYPE 直接报错);xml2js 是 Node.js 库,前端需打包,体积大且默认启用回调风格。推荐用 fast-xml-parser(v4+)——它不依赖 DOM,支持流式解析、命名空间、CDATA,且提供同步 API:

  • 安装:npm install fast-xml-parser,然后 import { parse } from "fast-xml-parser"
  • 关键配置:ignoreAttributes: false(保留 @_attr)、parseAttributeValue: true(转数字/布尔)、allowBooleanAttributes: true(处理 disabled 这类无值属性)
  • 错误捕获必须写全:if (!parser.validate(xmlString)) { throw new Error(parser.getLastError()); }

处理常见 XML 特性对 JSON 结构的影响

XML 到 JSON 没有唯一映射标准,不同库输出差异大。例如:

Tanka
Tanka

具备AI长期记忆的下一代团队协作沟通工具

下载
Apple

fast-xml-parser 默认输出为:

{ "#text": "Apple", "@_id": "123" }
  • 文本内容统一进 #text 键,属性进 @_xxx 键——这是为避免键名冲突,不是 bug
  • 如果想扁平化(如把 @_id 提到同级),需后处理:delete obj["@_id"]; obj.id = obj["@_id"];
  • 重复子元素(如多个 )会被自动转为数组,即使只有一个——这是合理设计,避免后续新增时类型突变
  • 空标签 解析后是 { "#text": "" },不是 nullundefined

安全与边界情况必须手动拦截

用户拖拽的 XML 可能含恶意内容:外部实体(XXE)、超深嵌套、超长文本。浏览器原生解析器对此防护较弱:

  • 禁用外部实体:传入 ignoreDeclaration: true, ignorePi: true, ignoreComments: true,并确保 ignoreXMLDeclarationtrue
  • 限制嵌套深度:用 maxDepth: 20 参数(fast-xml-parser v4.2+ 支持)
  • 超长文本截断:解析前检查 xmlString.length (10MB),否则提示“文件过大”
  • 不信任 Content-Type:即使服务端返回 application/xml,也要以实际字符串内容为准

命名空间、处理指令、注释这些非核心内容,多数业务场景可直接丢弃,省去映射逻辑和体积膨胀。

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

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

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

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

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

431

2023.08.07

json是什么
json是什么

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

542

2023.08.23

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

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

314

2023.10.13

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

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

79

2025.09.10

c语言中null和NULL的区别
c语言中null和NULL的区别

c语言中null和NULL的区别是:null是C语言中的一个宏定义,通常用来表示一个空指针,可以用于初始化指针变量,或者在条件语句中判断指针是否为空;NULL是C语言中的一个预定义常量,通常用来表示一个空值,用于表示一个空的指针、空的指针数组或者空的结构体指针。

241

2023.09.22

java中null的用法
java中null的用法

在Java中,null表示一个引用类型的变量不指向任何对象。可以将null赋值给任何引用类型的变量,包括类、接口、数组、字符串等。想了解更多null的相关内容,可以阅读本专题下面的文章。

621

2024.03.01

if什么意思
if什么意思

if的意思是“如果”的条件。它是一个用于引导条件语句的关键词,用于根据特定条件的真假情况来执行不同的代码块。本专题提供if什么意思的相关文章,供大家免费阅读。

798

2023.08.22

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

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

1918

2024.04.01

Golang处理数据库错误教程合集
Golang处理数据库错误教程合集

本专题整合了Golang数据库错误处理方法、技巧、管理策略相关内容,阅读专题下面的文章了解更多详细内容。

39

2026.02.06

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WEB前端教程【HTML5+CSS3+JS】
WEB前端教程【HTML5+CSS3+JS】

共101课时 | 8.9万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 3.3万人学习

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

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