如何使用nodejs/multer使用react-redux-saga添加带有图像的项目

Question

我正在尝试保存表单中包含图像的项目。我能够使用邮递员保存项目，但在尝试从反应冗余传奇时遇到问题。我正在使用蚂蚁设计作为表单。

前端代码：

handleSubmit = e => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
const { fileList } = this.state;
const formData = new FormData();
fileList.forEach(file => {
formData.append("files[]", file);
});
const postItemData = { ...values, images: formData };
this.props.createItem(postItemData);
}
});
};

传奇：

当我尝试控制台时，我可以使用图像字段作为表单数据获取项目详细信息

{
let itemData = yield select(makeSelectPostItemData());
const token = yield select(makeSelectToken());
console.log(itemData, "itemData");
const response = yield call(request, `/item`, {
method: "POST",
headers: {
Authorization: `${token}`
},
body: JSON.stringify(itemData)
});
const successMessage = "Item saved successfully!";
yield put(postItemSuccess(response, successMessage));
}

nodejs：

const upload = multer({
storage: storage,
limits: { fileSize: 1000000 },
fileFilter: function(req, file, cb) {
checkFileType(file, cb);
}
}).array("images");

upload(req, res, err => {
if (err) {
console.log(err, "error");
res.send({ msg: err });
} else {
console.log(req, "req");
if (req.files === undefined) {
res.send({ msg: "Error: No file selected!" });
} else {
const { errors, isValid } = validatePostItem(req.body);
// check validation
if (!isValid) {
return res.status(400).json(errors);
}
const files = req.files;
}
}
});

在最后一行const files = req.files.当我尝试从邮递员那里时，我得到了文件详细信息，但是当我尝试从 react 请求它时，我没有 req.files。我如何从反应中获取 req.files，就像我从邮递员那里得到的那样？

Answer 1

我已经找到了解决方案。在句柄提交中，我有以下代码：

fileList.forEach(file => {
formData.append("files[]", file);
});
const postItemData = { ...values, images: formData };
this.props.createItem(postItemData);

我所做的不是分散值并在图像中插入 formData，而是将它们全部放入 formData 中。

fileList.forEach(file => {
formData.append("files[]", images);
});
formData.append("name", values.name);
formData.append("price", values.price);
formData.append("detail", values.detail);
this.props.createItem(formData);

有了这个，我可以在节点端获得req.files和req.body.name, req.body.price, req.body.detail。与邮递员完全不同，但这对我有用。