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);

这是我的控制器代码

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 是未定义的，照片也位于 body 之下，而且这个 openingHours 不是一个数组。我在前端传递和排列。

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

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

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

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

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

标签： node.jsvue.jsvuejs2form-databody-parser

Answer 1

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

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

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

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