form-data 请求 body 为空

Question

我正在尝试将图像和一些数据从 API 发送到另一个。图像用 multer 存储在内存中。但是当我想发送它时，body 只是空的。我用邮递员尝试了同样的请求，它完美地工作了。

邮差测试 postman test image

服务器测试 server test image

这是一些代码。我删除了其中的一些内容以便您可以更好地阅读它

export const saveImage = async ({ image, name, folder, options }: { image: any, name?: any, folder: string, options?: any }) => {
    try {
        const fd = new FormData();
        fd.append("image", image.buffer, image.originalname);
        if(options) {
            fd.append("options[resize][height]", options?.resize?.height);
            fd.append("options[resize][width]", options?.resize?.width);
        }
        if(name) fd.append("name", name);
        fd.append("folder", folder);
        fd.append("servideId", IMAGES_ID);
        fd.append("serviceSecret", IMAGES_SECRET);

        console.log(fd)

        const formHeaders = fd.getHeaders();

        const request = await axios.post(`${IMAGES_URL}/api/images`, {
            headers: formHeaders,
            body: fd
        });

        return request.data.id;
    } catch (error) {
        const { response } = error;
        console.log(response.request.data)
        if(error?.response?.data?.error) {
            throw { statusCode: error.response.status, message: error.response.data.error }
        }
        console.error("Images API", error);
        throw new InternalError("Something gone wrong");
    }
}

当我记录 FormData 时，我可以在 _streams 中看到我正在发送的数据，但是图像 API 收到一个空的 body。 FormData screenshot

如果您需要更多信息，请告诉我！谢谢

Answer 1

有了axios，可以直接使用表单数据，无需处理headers。

axios.post("/api/images", fd)

~~如果您希望在将来的某个时候修改 headers，您应该将 formData 传递给 `data` 字段而不是 `body`。~~

~~axios.post("/api/images", { headers: formHeaders, data: fd })~~

评论更正。

也可以使用 Axios API syntax 来完成。

axios({method: 'post', url: 'url', data: fd, headers: {} })

在后端，multer 会将您的文件添加到 req.file 而不是 req.body，如果您已正确配置的话。

Answer 2

post 方法的 axios API 是：axios.post(url[, data[, config]])。第二个参数 必须始终 是您发送的数据。

在你的情况下，axios 认为 { headers: formHeaders, body: fd } 是正文，请求最终是 application/json。要在 Node.js 中使用 axios 发送包含数据的文件，请执行以下操作：

const response = await axios.post(`${IMAGES_URL}/api/images`, fd, {
  headers: {
    ...formHeaders,
    'X-Custom-Header': 'lala', // optional
  },
});

你的问题启发了我将这个答案写成一篇文章 — Send a File With Axios in Node.js。它涵盖了一些常见的陷阱，您将学习如何发送存储为缓冲区或来自流的文件。

form-data 请求 body 为空

form-data request body is empty

multipartform-data

node.js

express

postman

multer