来自 FormData 的 ExpressJS PUT 请求正文数据始终为 null

ExpressJS PUT request body data from FormData is always null

提问人:huytruong 提问时间:11/10/2023 最后编辑:huytruong 更新时间:11/10/2023 访问量:47

问:

每次我通过 React 上的表单向我的 API 提交 PUT 请求时,请求正文最终总是为空,我不完全确定数据发生了什么。

const handleEdit = async (e) => {
        e.preventDefault()
        console.log("Submitted")

        const formData = new FormData()
        formData.append("author", author)
        formData.append("title", title)
        formData.append("image", image)
        formData.append("body", body)
    
        // alert(author + " " + title + " " + image + " " + body)
    
        const response = await fetch(`http://localhost:3002/api/blogs/put/${selectedId}`,{
            method: "PUT",
            body: formData,
        })
    
        if (response.status === 200) {
          alert("Updated")
          window.location.reload()
        } else {
          console.log("Error")
        }
    }

提交表单后,将运行代码。我已经确认附加的数据不是 null 并且具有所有正确的值。

这是请求处理程序:

app.put("/api/blogs/put/:id", (req, res) => {
    const id = req.params.id;
    
    const author = req.body.author;
    const title = req.body.title;
    const image = req.body.image;
    const body = req.body.body;

    console.log(req)

    db.query("UPDATE blogs SET author = ?, title = ?, image = ?, body = ? WHERE id = ?", [author, title, image, body, id], (err, result) => {
        if (err) {
            console.log(err);
            res.status(500).send('Error updating blog post');
        }
        
        res.send(result);
    })
})

当我控制台.log(req)时,正文:{}是空的。

没有错误,请求成功通过,只是将我的 SQL Server 上的所有字段更新为 null。

提交表单时,所有必填字段都会附加到 formData,我已经确认它不是 null,然后一旦请求通过,它就会到达处理程序,然后一切都为 null,正文为空。

我还尝试将processData: false,contentType: false添加到请求中(单独和/或两者)。

控制台或我能看到的任何内容都没有错误。

reactjs node.js 表示 表单数据

评论

0赞 Phil 11/10/2023
您需要像 Multer 这样的中间件来处理请求正文multipart/form-data
1赞 Phil 11/10/2023
这回答了你的问题吗?Node/Express 文件上传
0赞 Mike 'Pomax' Kamermans 11/10/2023
想解释一下你的想法吗?因为 JS 解释器可能对此有意见,种类繁多。async (e) =\> { ...SyntaxError
0赞 Phil 11/10/2023
@Mike'Pomax'Kamermans,它只是愚蠢的“提问巫师”的神器。我敢肯定 OP 的代码实际上没有=\>
2赞 huytruong 11/10/2023
@Phil,是的,这就是所缺少的——非常感谢。

答:

-1赞 Akeel Ahmed Qureshi 11/10/2023 #1
 To resolve this issue you can add enctype="multipart/form-data" and method="PUT" to your form in your React component. 
     Like this:
    
     <form onSubmit={handleEdit} encType="multipart/form-data" method="PUT">
      //your code....
        <button type="submit">Submit</button>
    </form>
    
    I hope this will be helpful for you .