Multer通过ReactJS返回`undefined`用于文件上传
问题描述:
无论我如何实现文件上传,当检查Express中请求的req.file
属性时,我会得到undefined
。Multer通过ReactJS返回`undefined`用于文件上传
..
阵营代码
组件:
import Files from 'react-files';
<form encType="multipart/formdata">
<Files
ref='files'
onChange={this.onFileUpload}>
</Files>
</form>
方法:
onFileUpload (files) {
let reader = new FileReader();
reader.onload = upload => {
this.setState({
dataURI: upload.target.result
},() => {
if (typeof appState.balance == 'number' && appState.balance > 0) {
appState.onFileAdd(files, this.state.dataURI);
} else {
this.setState({ modal: true });
}
});
}
reader.readAsDataURL(files[files.length - 1]);
}
这正常工作;该状态中的dataURI
值是合法的并且设置正确。
..
API调用代码
export async function funFile(name, dataURI) {
let data = new FormData();
data.append('file', dataURI);
data.append('name', name);
return await fetch('http://localhost:1185/fun',
{ method: 'POST', data }).then(res => {
if (res.ok && res.status == 200) {
return res.json();
} else {
return null;
}
});
}
检查data
这里返回预期FormData
对象,虽然没有看到指定的name
和file
属性(这是否是因为他们的能力没有正确分配,或者这是预期行为,我不确定)。
..
快速代码不管什么,我在这一点上做的
var multer = require('multer');
var upload = multer({ destination: 'uploads/' });
app.post('/fun', upload.single('file'), (req, res) => {
console.log('file', req.file);
console.log('files', req.files);
// both of these return undefined
});
,请求返回没有文件数据。 req.body
属性也是空的。
我不确定事情在这里出了什么问题,并且从这个实现的所有可能的教程和演练中我已经尝试了所有可能的语法变体,我可以想到,所以任何帮助都会被赞赏!
答
我相信问题是读取文件作为数据url。忘记FileReader
。您不需要阅读任何内容,只需将文件对象传递给您的FormData
即可完成设置。
的onChange
onFileUpload (files) {
this.setState({
file: files[files.length-1]
},() => {
if (typeof appState.balance == 'number' && appState.balance > 0) {
appState.onFileAdd(files, this.state.file);
} else {
this.setState({ modal: true });
}
});
}
API调用
export async function funFile(name, file) {
let data = new FormData();
data.append(name, file); // name here should be avatar
return await fetch('http://localhost:1185/fun',
{ method: 'POST', data }).then(res => {
if (res.ok && res.status == 200) {
return res.json();
} else {
return null;
}
});
}
那么你的'upload.single( '文件')'呢? – Panther