如何提交包含文本、文件输入的Vue.js表单到Express API

你可以直接把自定义对象序列化后加入FormData实例，再将整个FormData作为请求体提交即可，同时需要配套调整后端Express的参数解析逻辑。

前端代码修改 #

const plat = {name : this.name, desc : this.desc, price : this.price, vege : this.vege, category: this.category};

const formData = new FormData();
// 追加文件
formData.append('file', this.file);
// 序列化plat对象后追加到FormData
formData.append('plat', JSON.stringify(plat));

const options = {
    method: 'POST',
    // 直接传入formData作为请求体
    body: formData
    // 注意：不要手动设置Content-Type请求头，浏览器会自动生成带boundary标识的正确值，手动设置会导致文件解析失败
};

fetch("/menu/plat/add", options)
.then(res => res.json())
.then(result => {
    // 处理提交后的返回逻辑
})
.catch(err => {
    // 处理异常
})

后端Express配套配置 #

Express原生不支持解析multipart/form-data格式的请求体，需要使用multer中间件处理：

1. 先安装依赖：
   npm install multer

2. 路由配置示例：

const multer = require('multer');
// 配置文件存储规则，可根据需求调整为内存存储或自定义磁盘存储路径
const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, 'uploads/') // 需提前在项目根目录创建uploads文件夹用于存放上传文件
  },
  filename: function (req, file, cb) {
    cb(null, `${Date.now()}-${file.originalname}`)
  }
})
const upload = multer({ storage: storage })

// 路由配置，upload.single('file')对应前端formData中追加的文件字段名
app.post('/menu/plat/add', upload.single('file'), (req, res) => {
  // 获取上传的文件信息
  const uploadFile = req.file
  // 解析拿到plat对象
  const plat = JSON.parse(req.body.plat)
  // 后续业务逻辑处理
  res.json({
    code: 200,
    message: '提交成功'
  })
})

可选轻量方案 #

如果plat的字段数量较少，也可以直接逐个追加字段到formData，不需要序列化：

// 前端追加字段
formData.append('name', this.name)
formData.append('desc', this.desc)
formData.append('price', this.price)
formData.append('vege', this.vege)
formData.append('category', this.category)

这种场景下后端无需解析JSON，直接通过req.body.xxx即可拿到对应字段值。

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