Question

我正在使用 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", auth, upload.array("images"), pageValidationRules(), validate, async (req, res) => { ... });

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

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

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

0 个答案: