Javascript对象在axios post请求后没有属性

Question

我正在使用VueJS制作一个web应用程序，该应用程序使axios调用使用express的NodeJS API。我目前正试图将文件发送到我的NodeJS，以便它可以保存它们。然而，即使我的浏览器显示了我的文件数组的所有属性，我的NodeJS将其读取为空。我已经阅读了之前关于这个话题的所有问题，但我没有任何进展。请注意，我可以很好地发布任何其他数据，我所有的SQL插入请求都做得很好，请注意，它们不涉及发送数组。

有希望的解决方案不工作的例子:https://stackoverflow.com/a/66541165/12498040

这是我的客户端JS, console.log()在浏览器控制台中打印N个文件对象数组:

console.log(data)
await axios.post('/api/fichiers', {fichiers:data});

这是我的NodeJS，使用console.log(element)它打印N个"{}"在浏览器控制台中，console.log(element.name)打印N个"未定义的";在服务器端:

app.post('/api/fichiers', (req, res) => {
req.body.fichiers.forEach((element) => {
console.log(element.name);
});
});

感谢您提供的任何帮助:)

Answer 1

您将获得一个空对象数组，因为File对象不可序列化为JSON。

如果你想发送文件，你需要用FormData对象替换包含一个普通数组的对象，你要传递给axios(它会尝试将其序列化为JSON)。

然后您需要在Express应用程序中使用体解析中间件，它可以处理FormData对象将生成的multipart/form-data请求体。body-parser模块不能这样做，但它的文档链接到一些选项。

Answer 2

谢谢!它现在按预期工作了。如果有人感兴趣的话，我是这样做的:

客户端JS:

var formData = new FormData();
for (let i = 0; i < data.length; i++) {
formData.append("files", data[i]);
}
await axios.post('/api/fichiers', formData);

NodeJS:

const multer = require('multer')
var storage = multer.diskStorage(
{
destination: function (req, file, cb) {
cb(null, './tempDir/')
},
filename: function (req, file, cb) {
cb(null, Date.now() + '_' + file.originalname);
}
}
);
var upload = multer({ storage: storage });
app.post('/api/fichiers', upload.array('files'));

然后安装npm fs.extra将文件移动到所需的目录