node.js - VueJS表单数据如何发送带有其他数据的图像文件

Question

我想将图像文件夹与其他数据一起发送。 (名称和营业时间)；

这是我用来向后端提交数据的 vuejs 代码

const formData = new FormData();

formData.append("name", this.name);
formData.append("openingHours", this.openingHours);
formData.append("photos", this.selectedFile);

await this.$http.post("spa", formData);

这是我的 Controller 代码

var multer = require('multer')
var upload = multer({ dest: 'uploads/' })
router.post('/', upload.array('photos', 10), async (req, res) => {

  console.log(req.file);
  console.log(req.body);


});

这里 req.file 未定义，照片也位于正文下方，而且 openingHours 也不是数组。我在前端传递和数组。

这是我在 app.js 中的正文解析器设置

const bodyParser = require('body-parser');
app.use(bodyParser.urlencoded({ extended: false }))
app.use(bodyParser.json());

谁能告诉我我的代码有什么问题吗？

我想将 openingHours 作为 JS 数组传递。

已更新这就是我在该方法中控制台记录 openingHours 时得到的结果。

Answer 1

在保存到 FormData 之前，您需要调用 JSON.stringify 对数组进行字符串化:

formData.append("openingHours", JSON.stringify(this.openingHours));

在后端，您需要调用 JSON.parse 来解析它:

const openingHours = JSON.parse(req.body.openingHours)