我已经通读了这里所有可能的答案,但我不再确定问题可能是什么,因为它们都不起作用。我有一个上传单个图像的表单,它按预期工作,但在另一个表单上,我尝试上传多个文件并有表单输入,req.file始终是未定义的,图像数据最终保存在req.body中。因此,我认为可能存在一个问题,即穆特无法获得文件数据...?
我在一些地方读到,正文解析器可能无法很好地处理Multer,但不幸的是,我两者都需要。
路由
const destination = './public/uploads/posts';
const storage = multer.diskStorage({
destination: destination,
filename: (req, file, cb) => {
cb(null, file.originalname);
},
});
const upload = multer({storage}).array('images');
router.post('/posts', (req, res) => {
upload(req, res, (err) => {
if(err) {
console.log('errors', err)
res.json({success: false, error: err})
} else {
if(req.files === undefined) {
console.log('error: Images returned undefined');
} else {
const { title, description, url, auth_name, auth_id } = req.body;
if(!title || !description) {
return res.json({
success: false,
error: 'All fields required',
message: 'Title and description fields are required'
});
}
// path we store in the db
let imageLocation = [];
const post = new Post();
for (const file of req.files) {
imageLocation.concat('/uploads/posts/' + file.filename)
}
post.title = title;
post.description = description;
post.url = url;
post.author_name = auth_name;
post.author = auth_id;
post.images = imageLocation;
post.save((err, post) => {
if(err) {
return res.json({ success: false, error: err, message: 'post failed' });
} else {
return res.json({ success: true, message: "added new post", post: post });
}
});
}
}
});
});
在Reaction组件中发布
我的图像设置为从DropZone包中获得的状态(我也在没有DropZone的情况下进行了测试,结果相同。我确保输入的名称是“图像”
submitNewPost = () => {
const { title, description, url, images } = this.state;
const auth_id = this.props.author_id;
const auth_name = this.props.author_name;
const formdata = new FormData();
formdata.append('title', title);
formdata.append('description', description);
formdata.append('url', url);
formdata.append('author_name', auth_name);
formdata.append('author', auth_id);
formdata.append('images', images);
fetch('/api/posts', {
method: 'POST',
body: formdata
}).then(res => res.json())
.then((res) => {
if (!res.success) {
this.setState({ message: res.message });
} else {
this.setState({
title: '',
description: '',
url: '',
images: '',
message: res.message
});
socket.emit('newPost', res.post);
}
});
}
更新
在这个帖子上的一些帮助下,我设法使用我现有的路线和 Postman 上传了图像。当我使用我的表单测试路由时,我仍然得到一个空的req.file,并且没有上传。
我在我的设置中添加了快速多部分文件解析器,我认为这使我离修复这个问题更近了一步。
服务器端
这是我添加到我的server.js中的内容
import { fileParser } from 'express-multipart-file-parser';
app.use(fileParser({
rawBodyOptions: {
limit: '15mb', //file size limit
},
busboyOptions: {
limits: {
fields: 20 //Number text fields allowed
}
},
}));
4条答案
按热度按时间pxiryf3j1#
要正确填充
req.files
,您需要按如下方式使用formdata.append
:i2loujxw2#
谢谢你所有的帮助。我设法把它修好了。原来我是将FileList对象连接到我所在状态下的数组,所以结构完全错误,在服务器上完全失败。我的照片现在可以完美上传了。
如果我发布了我的React部分,我相信你们中的任何人都会在一秒钟内注意到这一点,抱歉。我没有想到问题出在我的组件上。
问题
修复
oogrdqng3#
您缺少使用数组传递值的机会。
uqzxnwby4#
对于这个问题,上传中间件后没有在控制器中获取
req.file
,而在 Postman 测试时,在单个属性中选择多个文件,当然在前端循环中附加这些文件