0

0

Fetch API上传XML文件 Fetch如何POST XML文件

月夜之吻

月夜之吻

发布时间:2026-01-30 10:59:21

|

973人浏览过

|

来源于php中文网

原创

发送XML需显式设置Content-Type为text/xml或application/xml,否则易触发415错误;字符串发送用text/xml; charset=utf-8,File上传用FormData并避免手动设头,编码须全程统一为UTF-8。

fetch api上传xml文件 fetch如何post xml文件

Fetch POST XML 文件必须设置 Content-Typetext/xmlapplication/xml

浏览器默认不识别 XML 为可发送的请求体类型,如果不显式声明 Content-Type,服务端很可能拒绝解析或返回 400 错误。注意:fetch 不会自动推断 XML 类型,哪怕你传的是字符串或 Blob

常见错误现象:415 Unsupported Media Type后端收不到 XML 内容、XML 被当成纯文本乱码解析。

  • 用字符串发送时,Content-Type 推荐设为 text/xml; charset=utf-8(显式声明编码中文乱码
  • 若 XML 来自 File 对象或 input[type="file"],直接传 File 实例即可,但依然要设 Content-Type —— 浏览器不会自动补全
  • 避免用 application/x-www-form-urlencodedmultipart/form-data 包裹纯 XML 字符串,这会让服务端多一层解析逻辑,且容易出错

XML 字符串直接作为 body 传入 fetch

这是最轻量、最可控的方式,适合已知 XML 结构且无需文件元信息(如文件名)的场景。

const xmlString = `

  张三
  update
`;

fetch('/api/submit', {
  method: 'POST',
  headers: {
    'Content-Type': 'text/xml; charset=utf-8'
  },
  body: xmlString
})
.then(r => r.text())
.then(console.log);

⚠️ 注意:XML 字符串中的 > 等符号在 JS 字符串里无需转义(模板字符串或普通字符串都行),但确保原始 XML 合法 —— fetch 不校验 XML 格式,发出去就发出去了。

上传 FileBlob 类型的 XML 文件(含文件名)

当需要保留原始文件名、或后端要求 multipart 解析(比如某些老系统只认 multipart/form-data 中的 file 字段),就得走 FormData 路线。

  • 不能直接把 Filebody 传,否则 Content-Type 会变成 application/octet-stream,服务端可能拒收
  • 必须用 FormData.append('file', file),让浏览器自动设置边界和正确头
  • 此时 Content-Type 由浏览器自动生成(形如 multipart/form-data; boundary=xxx),不可手动覆盖,否则破坏格式
const input = document.querySelector('input[type="file"]');
input.addEventListener('change', async (e) => {
  const file = e.target.files[0];
  if (!file || !file.type.startsWith('text/xml') && !file.name.endsWith('.xml')) {
    console.warn('请选择 XML 文件');
    return;
  }

  const formData = new FormData();
  formData.append('xml_file', file); // 字段名按后端要求填

  try {
    const res = await fetch('/api/upload', {
      method: 'POST',
      body: formData // 不要设 headers!浏览器会自动加
    });
    console.log(await res.json());
  } catch (err) {
    console.error(err);
  }
});

服务端接收差异决定前端选哪种方式

前端怎么发,最终取决于后端接口设计,不是“哪种更标准”——没有银弹。

  • 如果后端是 Express + body-parser,默认不解析 XML;需用 express-xml-bodyparserraw 中间件,并配合 text/xml 直接收字符串
  • 如果后端是 Java Spring,@RequestBody String xml 对应 text/xml@RequestParam MultipartFile file 对应 FormData
  • 调试时用浏览器 DevTools 的 Network → Payload 查看实际发出的请求体和头,比猜靠谱得多

最容易被忽略的是编码一致性:XML 声明里的 encoding="UTF-8"、JS 字符串本身编码、Content-Type 中的 charset、服务端读取时的解码方式,四者不一致就会出现中文变问号或解析失败。

热门AI工具

更多
DeepSeek
DeepSeek

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

豆包大模型
豆包大模型

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

通义千问
通义千问

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

腾讯元宝
腾讯元宝

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

文心一言
文心一言

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

讯飞写作
讯飞写作

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

即梦AI
即梦AI

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

ChatGPT
ChatGPT

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

相关专题

更多
spring框架介绍
spring框架介绍

本专题整合了spring框架相关内容,想了解更多详细内容,请阅读专题下面的文章。

115

2025.08.06

Java Spring Security 与认证授权
Java Spring Security 与认证授权

本专题系统讲解 Java Spring Security 框架在认证与授权中的应用,涵盖用户身份验证、权限控制、JWT与OAuth2实现、跨站请求伪造(CSRF)防护、会话管理与安全漏洞防范。通过实际项目案例,帮助学习者掌握如何 使用 Spring Security 实现高安全性认证与授权机制,提升 Web 应用的安全性与用户数据保护。

33

2026.01.26

什么是中间件
什么是中间件

中间件是一种软件组件,充当不兼容组件之间的桥梁,提供额外服务,例如集成异构系统、提供常用服务、提高应用程序性能,以及简化应用程序开发。想了解更多中间件的相关内容,可以阅读本专题下面的文章。

178

2024.05.11

Golang 中间件开发与微服务架构
Golang 中间件开发与微服务架构

本专题系统讲解 Golang 在微服务架构中的中间件开发,包括日志处理、限流与熔断、认证与授权、服务监控、API 网关设计等常见中间件功能的实现。通过实战项目,帮助开发者理解如何使用 Go 编写高效、可扩展的中间件组件,并在微服务环境中进行灵活部署与管理。

217

2025.12.18

string转int
string转int

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

463

2023.08.02

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

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

1902

2024.04.01

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

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

2092

2024.08.01

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

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

1075

2024.11.28

C++ 设计模式与软件架构
C++ 设计模式与软件架构

本专题深入讲解 C++ 中的常见设计模式与架构优化,包括单例模式、工厂模式、观察者模式、策略模式、命令模式等,结合实际案例展示如何在 C++ 项目中应用这些模式提升代码可维护性与扩展性。通过案例分析,帮助开发者掌握 如何运用设计模式构建高质量的软件架构,提升系统的灵活性与可扩展性。

0

2026.01.30

热门下载

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

精品课程

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

共23课时 | 3万人学习

C# 教程
C# 教程

共94课时 | 8万人学习

Java 教程
Java 教程

共578课时 | 53.3万人学习

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

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