使用 React 同时上传文件和 JSON 对象到 Node 服务器

编程问答 2022-05-25

问题描述

我正在使用 React 创建一个页面构建器应用程序。用户可以创建一个页面，输入标题、描述等值，然后添加页面“块”，如标题、段落、按钮等。

我有以下函数，它接受一个页面对象并使用 Node/Express 端点更新数据库。

const updatePage = async page => {

        const config = {
            headers: {
                "Content-Type": "application/json"
            }
        };

        try {
            await axios.put(`${url}/api/pages/${page._id}`,page,config);
        } catch (err) {
            console.log(err)
        }
    };

页面对象将如下所示：

{
    _id: "601f688e9e48608d2b220c91",title: "Next Step",slug: "next-step",description: "Take the next step in your journey.",content: [
        {
            _id: "e5a62f30-f1f5-41d6-9fd5-b76791cb503e",type: "heading",...
        },{
            _id: "d1739766-f2b0-455f-8e46-664d08e02c07",type: "paragraph",{
            _id: "9247b599-a3c7-4feb-be68-123445dac219"
            type: "button",...
        }
    ]
}

在 Node 服务器上，我使用 express-validator 来验证通过 req.body 返回和访问的页面对象。

router.put("api/pages/:id",auth,pageValidationRules(),validate,async (req,res) => { ... });

一切正常。当我尝试添加图像上传时会出现问题。上传文件时，文件对象存储在 page.banner 处的页面对象中，但我不知道如何在同一个 Axios 调用中发布文件和页面对象。到处都告诉我要创建一个 FormData 对象并附加图像和页面对象。然后将 formData 发送到端点。

let formData = new FormData();
formData.append("banner",page.banner);
formData.append("data",page);

我在服务器上使用 Multer，但现在页面对象不在 req.body 中，而是在 req.body.data 中，我的验证失败。值还包括 [object Object]。

const upload = multer({ dest: 'uploads/' })

router.put("/:id",upload.array("images"),res) => { ... });

我需要在同一个请求中上传和更新表单，因为我需要用图像信息更新我的数据库。

任何见解表示赞赏。我一直在寻找，但找不到任何远程帮助。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

axiosaxiosaxiosexpress-validatormulterreactjsreactjsreactjsreactjs