如何在Antd Upload组件的请求体中携带元数据？

核心原因 #

文件上传请求采用multipart/form-data格式，Express默认的express.json()或express.urlencoded()中间件无法解析该类型请求体，导致request.body为空；同时Antd Upload的data参数是作为form-data的字段而非JSON请求体发送的。

解决步骤 #

1. 后端配置multer中间件 #

Express需要借助multer来解析multipart/form-data类型的请求，步骤如下：

• 安装multer：

  npm install multer
  

• 配置并使用multer：

  const express = require('express');
  const multer = require('multer');
  const app = express();
  
  // 可选：配置存储方式，这里用内存存储，也可配置磁盘存储
  const storage = multer.memoryStorage();
  const upload = multer({ storage: storage });
  
  // 处理文件上传路由，upload.single('file')对应Antd Upload默认的文件字段名`file`
  app.post('/file/upload', upload.single('file'), (req, res) => {
    // 获取前端通过data传递的元数据
    const testMeta = req.body.test;
    // 获取上传的文件对象
    const uploadedFile = req.file;
  
    // 业务逻辑处理...
    res.status(200).json({
      success: true,
      meta: testMeta,
      fileInfo: {
        name: uploadedFile.originalname,
        size: uploadedFile.size
      }
    });
  });
  

2. 前端代码确认 #

你的前端代码本身没有问题，data={{test:"test"}}会将test作为form-data字段随文件一起发送。如果需要动态生成元数据，也可以使用函数形式：

<Upload
  action={config.backend.url + "/file/upload"}
  data={() => ({ test: "动态生成的元数据" })}
  listType="picture-card"
  fileList={fileList}
  accept={acceptedTypes.join()}
  {...others}
>
  {/* 上传按钮内容 */}
</Upload>

常见注意事项 #

• 不要使用express.json()中间件解析文件上传请求，必须依赖multer处理multipart/form-data。
• 如果是多文件上传，需改用upload.array('file', 5)（最多5个文件）或upload.fields([{name: 'file'}])来解析。
• Antd Upload默认的文件字段名为file，如果修改了name属性，后端multer配置也要对应调整。

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