客户端为File对象添加自定义属性后，经FormData+Multer传至Node.js服务器丢失问题求助

我之前也碰到过一模一样的问题，其实核心原因很简单：当你给File对象挂载自定义属性后，通过FormData发送请求时，浏览器只会序列化File的标准内置属性（比如name、type、size这些），你手动添加的自定义属性根本不会被打包进请求体里——因为FormData处理File类型条目时，是按照HTTP的multipart/form-data规范来构造内容的，这个规范里根本没有预留自定义属性的位置。

下面给你两种实用的解决方案，按需选择：

方案1：单独传递自定义属性（适合单个属性场景） #

最直接的方式就是把自定义属性作为FormData的独立字段发送，服务器端同时接收文件和这个属性：

客户端代码 #

let file = new File([blob], 'flower.jpg');
file.custom = "another properties";

const formData = new FormData();
// 添加文件本身
formData.append('file', file);
// 单独添加自定义属性
formData.append('fileCustom', file.custom);

// 发送请求（用fetch/axios都可以）
fetch('/upload', {
  method: 'POST',
  body: formData
});

服务器端（Node.js + Multer）代码 #

先确保你已经配置好Multer的存储规则，然后在路由里同时获取文件和请求体里的属性：

const multer = require('multer');
// 配置文件存储路径，也可以用内存存储
const upload = multer({ dest: './uploads/' });

app.post('/upload', upload.single('file'), (req, res) => {
  // 获取上传的文件对象
  const uploadedFile = req.file;
  // 获取自定义属性
  const customAttr = req.body.fileCustom;

  console.log('拿到的自定义属性:', customAttr); // 输出 "another properties"
  console.log('上传的文件信息:', uploadedFile);

  // 后续的文件存储/业务逻辑...
  res.status(200).json({ msg: '上传成功', custom: customAttr });
});

方案2：批量传递多个自定义属性（适合多属性场景） #

如果有多个自定义属性，可以把它们打包成JSON字符串，作为单个FormData字段发送，服务器端解析即可：

客户端代码 #

let file = new File([blob], 'flower.jpg');
file.custom = "another properties";
file.author = "Bernt";
file.tags = ["flower", "nature"];

const formData = new FormData();
formData.append('file', file);
// 把所有自定义属性打包成JSON字符串
const fileMeta = JSON.stringify({
  custom: file.custom,
  author: file.author,
  tags: file.tags
});
formData.append('fileMeta', fileMeta);

服务器端代码 #

app.post('/upload', upload.single('file'), (req, res) => {
  const uploadedFile = req.file;
  // 解析JSON字符串拿到所有自定义属性
  const fileMeta = JSON.parse(req.body.fileMeta);

  console.log('自定义属性custom:', fileMeta.custom);
  console.log('作者:', fileMeta.author);
  console.log('标签:', fileMeta.tags);

  // 后续处理逻辑...
});

内容的提问来源于stack exchange，提问作者Bernt Christian Egeland