我第一次使用multer而且我遇到了一些麻烦。
我想从具有superagent lib的react客户端上传我的服务器上的图像文件。
但是req.file
数据总是未定义的,这是我的代码:
服务器端:
const upload = multer({
dest: 'uploads/' })
app.post('/uploadprofile', upload.single('profil'), (req, res) => {
console.log(req.file);
console.log(req.files);
console.log(req.body);
res.status(200).end()
})
我的客户方:
onUploadFile(e) {
console.log(e.target.files[0])
this.setState({
img: e.target.files[0]
}, () => {
agent
.post("http://localhost:3100/uploadprofile")
.attach('profil', this.state.img, this.state.img.name)
.set("Content-Type", "")
.end((err, res) => {
console.log(err)
console.log(res)
console.log("send")
})
})
}
render() {
return (
<input id="file" type="file" accept="image/*" name="profil" className="inputButton" onChange={this.onUploadFile}/>
)
}
在我的superagent请求中,我必须覆盖内容类型,否则将发送json数据。
但我的后端req.file
仍未定义。
感谢您的帮助!
答案 0 :(得分:0)
问题与您的超级客服电话有关,请检查以下页面: https://visionmedia.github.io/superagent/#multipart-requests
据此:
使用.field()或.attach()时,不能使用.send(),并且不得设置Content-Type(将为您设置正确的类型)。
因此,您需要删除.set("Content-Type", "")
,然后执行以下操作:
await superagent
.post(url)
.withCredentials()
.accept('application/json')
.field('lets_try', 'ok!') // this would come from a form field
.attach('staff', event.target.files[0]); // this is your file
在服务器端,一旦获得了(单个)文件,如果希望输入一些文本,则仍然必须将其缓冲区转换为字符串:
console.log(`Uploaded req.body=${JSON.stringify(req.body)}`);
console.log(` req.file=${JSON.stringify(req.file, null, 2)}`);
console.log(`req.file=${req.file.buffer.toString()}`);
您将获得:
Uploaded req.body={"lets_try": "ok!"}
req.file={
"fieldname": "staff",
"originalname": "test.json",
"encoding": "7bit",
"mimetype": "application/json",
"buffer": {
"0": 10,
"1": 98,
"2": 111,
"3": 98,
"4": 10,
},
"size": 5,
}
req.file=
bob
如果文件内容为bob
:-)