node.js - req.files 未使用 express-fileupload 定义
问题描述
我正在创建一个博客,所以想为每篇文章上传一张图片。为此,我使用了快速文件上传。使用 nodejs 我已完成以下操作以将客户端发送的图像保存在MongoDB
. req.files
当我在控制台中打印 的值时,我得到undefined
.
exports.addPost = (req, res) => {
const file = req.files.file
const post = new Blog()
post.title = req.body.title
post.des = req.body.des
post.file = file
post.save((err, doc) => {
if (!err) {
res.send(doc)
} else {
console.log(err)
}
})
}
在反应中,我有 Addpost.js 设置状态并处理表单提交,如下所示:
const Addpost=()=> {
const [title, settitle] = useState('')
const [des, setdes] = useState('')
const [file, setfile] = useState('');
const {addPost}=useContext(Globalcontext)
const handleSubmit = (e)=>{
e.preventDefault()
const formData = new FormData()
formData.append('file',file)
const addedValue={
title,
des,
formData
}
addPost(addedValue)
settitle('')
setdes('')
setfile('')
}
const onChange=(e)=>{
const file=e.target.files[0]
setfile(file)
}
return (
<div>
<form onSubmit={handleSubmit} encType="multipart/form-data">
<input type="text" name="title" value={title} onChange={(e)=>settitle(e.target.value)}/>
<input type="text" name="des"value={des} onChange={(e)=>setdes(e.target.value)}/>
<input type="file" name="file" onChange={onChange}/>
<button type='submit' value='submit'>Add Post</button>
</form>
</div>
)
}
AXIOS
发布请求发送为:
function addPost(postdetail) {
axios.post('http://localhost:4000/blog', postdetail).then(res => {
dispatch({
type: 'ADD_DATA',
payload: res.data
})
}).catch(error => {
console.log(error)
})
}
我收到错误消息:
Cannot read property 'file' of undefined
解决方案
1. 可能你没有注册中间件。
根据文档示例,您应该在引用 req.files 之前注册 express-fileupload 中间件:
const express = require('express');
const fileUpload = require('express-fileupload');
const app = express();
// default options
app.use(fileUpload());
也不要忘记添加空检查以防没有文件上传:
app.post('/upload', function(req, res) {
if (!req.files || Object.keys(req.files).length === 0) {
return res.status(400).send('No files were uploaded.');
}
let file = req.files.file;
// do something with uploaded temp file
}
multipart/form-data
2.上传文件时的内容类型
const handleSubmit=(e)=>{
e.preventDefault()
const formData=new FormData()
formData.append('file', file)
setfile('')
}
function addPost(postdetail){
axios.post('http://localhost:4000/blog',formData, {
headers: {
'Content-Type': 'multipart/form-data'
}
}).then(res=>{
dispatch({
type:'ADD_DATA',
payload:res.data
})
}).catch(error=>{
console.log(error)
})
}
3. 其他表单字段(des, title)可能无法使用multipart/formdata提交
考虑为博客创建打开两条路线。
[POST] '/blog/upload-image'
用于图片上传
[POST] '/blog/new
用于创建博客(从图像上传响应中获取的标题、des 和 image_id)
推荐阅读
- python - 用 Python 编写一个程序,让你登录到电子邮件中
- csv - 从 CSV 文件格式到 HDF5
- javascript - SCRIPT5002:复制数组时预期的函数 [...files]
- c# - HashLocationsstrategy 在 Angular 6 应用程序中不起作用
- java - arcore/sceneform 在增强现实中加载 webview
- c# - 使用多线程将数据同时插入到列表中
- sharepoint - SharePoint 表 - 使用项目 ID 构建 URL
- google-classroom - 使用谷歌课堂 api 更改课程 ownerId
- c++ - IntelliSense 无法打开源文件
- ruby - Jekyll 博客主题现在在 GitLab 页面上显示博客文章