node.js - 无法使用 formData 和 axios post 请求将图片文件发送到后端
问题描述
我有一个 MERN 堆栈应用程序,我想提交一个包含文件输入和普通文本输入的表单,提交的表单被发送到 redux 操作,并且在操作内我使用 formData 将图像转换为二进制形式并发送它使用 formData.append 和 axios .post 到后端,在后端我得到了带有 upload.single('photo') 的常用 multer 代码。后端本身可以工作,我用邮递员对其进行了测试。前端还原动作:
// update user info
export const updateUser = (userData, id) => dispatch => {
var form = new FormData()
console.log(userData.photo);
if (userData.photo) {
form.append('photo', userData.photo);
}
axios
.post("http://localhost:4000/api/users/update/" + id, userData)
.then(res => {
axios
.post('http://localhost:4000/api/users/upload_photo/' + id, form)
.then(res => {
const { user } = res.data;
console.log(user);
//save new user to localStorage
localStorage.setItem("user", JSON.stringify(user));
//dispatch to reducer
dispatch({
type: UPDATE_USER,
payload: user
})
})
})
}
后端 API
let storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, './uploads/user');
},
filename: function (req, file, cb) {
cb(null, req.params.id + "_" + Date.now() + "_" + Math.floor(Math.random() * 10000) + file.originalname);
}
});
let upload = multer({ storage: storage })
//profile picture upload
router.route('/upload_photo/:id').post(upload.single('photo'), function (req, res) {
User.findById(req.params.id, function (err, user) {
if (err) {
res.status(404).send("user is not found");
}
else {
user.photo = {};
user.photo.path = req.file.path;
user.save().then(() => {
res.json({ message: 'picture uploaded!', user: user });
})
.catch(err => {
res.status(400).send("Upload not possible");
});
}
})
});
解决方案
推荐阅读
- java - 如何在 JFrame 中添加“添加文本”
- php - 登录可以从数据库中获取任何数据,但显示结果“注销帐户”
- c++ - C++ 函数不会正确调用 main
- eclipse - 如何识别是否成功找到 Selenium(POM)中“asserEquals”的值?
- python - 将手指模板数据转换为图像
- html - CSS Grid 布局应该如何在媒体查询断点处重新组织/重新分布?
- ionic3 - 从 Playstore 安装时已发布的应用程序崩溃
- html - 如何将颜色设置为圆形画布的边框
- python - DEAP:创建自定义的个人生成器函数以及适应度函数
- java - Spring Security 无法将未登录用户从主页重定向到登录