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

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

Fetch POST XML 文件必须设置 Content-Type 为 text/xml 或 application/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-urlencoded 或 multipart/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 格式，发出去就发出去了。

上传 File 或 Blob 类型的 XML 文件（含文件名）

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

• 不能直接把 File 当 body 传，否则 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-bodyparser 或 raw 中间件，并配合 text/xml 直接收字符串
• 如果后端是 java spring，@RequestBody String xml 对应 text/xml；@RequestParam MultipartFile file 对应 FormData
• 调试时用浏览器 DevTools 的 Network → Payload 查看实际发出的请求体和头，比猜靠谱得多

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