我在这里已经阅读了所有可能的答案,但是我现在不确定是什么问题了,因为它们都不起作用。我有一个上载单个图像的表单,它可以按预期工作,但是在另一个尝试上载多个文件并有表单输入的表单上,req.file始终未定义,并且图像数据最终位于req.body中。所以我认为某个地方可能存在multer无法获取文件数据的问题...?
我在几个地方读到,人体分析器可能在与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 });
}
});
}
}
});
});
在React组件中发布
我的图像设置为从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);
}
});
}
更新
在此thread的帮助下,我设法使用现有的路线和邮递员上传了图像。当我使用表单测试路线时,仍然会得到一个空的req.file文件,没有上传。
我在我的设置中添加了express-multipart-file-parser,我认为这使我离解决此问题更近了一步。
服务器
这就是我添加到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
}
},
}));
答案 0 :(得分:2)
要正确填充req.files
,您需要像这样使用formdata.append
:
images.forEach(image => {
formdata.append('images', image);
})
答案 1 :(得分:0)
您缺少通过数组传递值的方法。
router.post('posts', upload.array('image', 10), function (req, res, next) {
})
答案 2 :(得分:0)
感谢所有帮助。我设法解决了。原来,我正在将FileList对象连接到处于我的状态的数组,因此结构都错了,而在服务器上它只是失败了。我的图像现在完美上传。
如果我发布了我的react组件的那一部分,那么我敢肯定,你们中的任何人都会在一秒钟内对此有所了解。我没有想到问题在我的组件中进一步蔓延。
问题
onFileLoad = (e) => {
this.setState({
images: this.state.images.concat(e.target.files)
});
}
修复
onFileLoad = (e) => {
this.setState({
images: e.target.files
});
}
submitMediaPOst = () => {
const imageArr = Array.from(images);
imageArr.forEach(image => {
formdata.append('images', image);
});
...