Vue表单多图上传时FormData字段传空对象问题排查

我来帮你排查这个问题，其实前后端都有需要调整的地方，咱们一步步来解决：

前端问题：FormData不能嵌套在JSON对象中 #

你当前的错误在于把FormData作为普通JavaScript对象的一个属性传给axios了。axios默认会将请求体序列化为JSON格式，而FormData对象在被序列化为JSON时会直接变成空对象{}，这就是后端收到images: {}的核心原因。

修复后的前端提交函数 #

正确的做法是把所有表单字段（文本+文件）都添加到同一个FormData对象中，直接将FormData作为请求体发送：

submit () { 
  // 创建FormData实例
  let formData = new FormData()
  // 添加文本字段
  formData.append('name', this.name)
  formData.append('surname', this.surname)
  formData.append('description', this.description)
  // 批量添加图片文件，用`images[]`作为键名方便后端解析
  for( var i = 0; i < this.images.length; i++ ){ 
    let img = this.images[i]; 
    formData.append('images[]', img); 
  } 
  // 发送请求时无需手动设置Content-Type，axios会自动识别FormData并设置正确的请求头
  axios.post('http://localhost:3000/api/users', formData) 
    .then(()=>{console.log('上传成功')}) 
    .catch((err)=>{console.error('上传失败:', err)}) 
}

另外可以给handleFileUpload加个简单的判断，避免用户没选文件时赋值空的files对象：

handleFileUpload() {
  const files = this.$refs.images.files
  if (files.length > 0) {
    this.images = files
  }
}

后端问题：body-parser无法处理multipart/form-data #

你的Express后端使用了body-parser，但这个中间件不支持解析multipart/form-data类型的请求（也就是文件上传的请求类型），需要使用multer这个专门处理文件上传的中间件。

修复后的后端代码 #

1. 先安装multer：

npm install multer --save

2. 修改后端代码，引入并配置multer，同时修复原有语法错误：

var express = require('express');
var cors = require('cors');
var bodyParser = require('body-parser');
var multer = require('multer');
var app = express();

// 配置multer：测试阶段用内存存储，生产环境建议配置磁盘存储指定保存路径
var storage = multer.memoryStorage()
var upload = multer({ storage: storage })

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(cors());

let users = []; // 修复原代码的语法错误：去掉多余的逗号

// 使用upload.array('images')接收名为images的多文件上传
app.post('/api/users', upload.array('images'), (req,res) => {
  // req.body 存储所有文本字段
  // req.files 存储所有上传的文件数组，包含文件名、大小、buffer等信息
  const newUser = {
    name: req.body.name,
    surname: req.body.surname,
    description: req.body.description,
    images: req.files
  }
  users.push(newUser)
  console.log('收到的用户数据:', newUser)
  res.json(users)
})

// 启动服务
app.listen(3000, () => {
  console.log('服务运行在端口3000')
})

补充说明 #

• 如果是生产环境，建议将multer的存储方式改为磁盘存储，指定文件保存的目录，避免内存占用过高，示例配置：

var storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, './uploads/') // 确保uploads目录已存在
  },
  filename: function (req, file, cb) {
    cb(null, Date.now() + '-' + file.originalname) // 避免文件名重复
  }
})
var upload = multer({ storage: storage })

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