使用express-fileupload时，req.files未定义

Question

使用express-fileupload时，req.files未定义

3

我正在创建一个博客，想为每篇文章上传一张图片。我使用了express-file upload来实现这个目的。使用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)
        }
    })
}

在React中，我有一个名为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的POST请求发送方式如下：

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

- Smriti Shrestha

这个回答解决了你的问题吗？如何正确使用express-fileupload - Vijay Palaskar

在React方面，我建议使用类似react-uploady这样的库。它使得发送额外的头部/参数变得非常简单。 - poeticGeek

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- glinda93 · Accepted Answer

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
}

2. 当你上传文件时，内容类型应该为 multipart/form-data

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. 其他表单字段（如描述，标题）可能无法使用multipart/formdata提交

考虑为博客创建开放两个路由。

[POST] '/blog/upload-image' 用于上传图片

[POST] '/blog/new 用于创建博客（标题，描述和图像ID从图像上传响应中获取）