如何将SVG元素发送至NodeJS服务器并重写SVG文件，解决request.body未定义问题

前端fetch请求修正 #

先将SVG元素转为字符串，再匹配对应请求格式发送：

• JSON格式传输示例：

// 提取SVG字符串内容
const svgElement = document.querySelector('svg');
const svgStr = new XMLSerializer().serializeToString(svgElement);

fetch('/你的接口路径', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({
    svgContent: svgStr,
    fileName: '目标保存文件名.svg'
  })
})

• FormData格式传输示例：

const svgElement = document.querySelector('svg');
const svgStr = new XMLSerializer().serializeToString(svgElement);
const formData = new FormData();
formData.append('svgContent', svgStr);
formData.append('fileName', '目标保存文件名.svg');

fetch('/你的接口路径', {
  method: 'POST',
  body: formData
})

后端NodeJS配置修正 #

Express框架默认不解析请求体，需根据前端传输格式启用对应解析中间件，且中间件必须放在路由定义之前：

• 对应JSON格式传输，添加JSON解析中间件：

const express = require('express');
const app = express();
// limit参数可根据SVG文件大小调整上限
app.use(express.json({ limit: '10mb' }));

• 对应FormData格式传输，使用multer中间件解析：

const express = require('express');
const multer = require('multer');
const fs = require('fs/promises');
const app = express();
const upload = multer();

app.post('/你的接口路径', upload.none(), async (req, res) => {
  // 此处即可正常获取SVG内容
  const { svgContent, fileName } = req.body;
  try {
    await fs.writeFile(`./指定文件夹路径/${fileName}`, svgContent, 'utf-8');
    res.json({ code: 0, msg: '保存成功' });
  } catch (err) {
    res.status(500).json({ code: 1, msg: '保存失败', error: err.message });
  }
})

常规排查点 #

• 检查浏览器控制台网络请求的Request Payload是否正常携带SVG内容
• 确认请求头的Content-Type和后端使用的解析中间件格式匹配
• 确认解析中间件的配置顺序在路由定义之前，顺序错误会导致解析失效

内容的提问来源于stack exchange，提问作者Alex