控制台可见PDF但网络面板无法查看，需在Payload中显示PDF

问题描述 #

用axios上传PDF文件时，控制台能正常打印包含File类型PDF的payload对象，但浏览器网络面板的请求Payload里看不到这个PDF文件。已经排查过控制台和网络面板，没解决问题，希望能在网络面板的Payload里看到PDF文件。

相关代码 #

上传PDF API代码

import { axiosInstances } from "./axiosInstanc"
interface upladPdfPayload {
    name: string;
    pdf: File
}
export const uploadPdfApi = async (payload: upladPdfPayload) => {
    try {
        console.log(payload);
        const res = await axiosInstances.post('/pdf/upload', payload);
        return res.data;
    } catch (error: any) {
        return error.response.data;
    }
}

控制台打印的Payload值

{name: 'Resarch paper certificate.pdf', pdf: File}
name: "Resarch paper certificate.pdf"
pdf: File
lastModified: 1713083292691
lastModifiedDate: Sun Apr 14 2024 13:58:12 GMT+0530 (India Standard Time) {}
name: "Resarch paper certificate.pdf"
size: 937460
type: "application/pdf"
webkitRelativePath: ""
[[Prototype]]: File
[[Prototype]]: Object

Axios实例配置代码

import axios from "axios";
import { baseUrl } from "./baseUrl";

function getToken() {
    return localStorage.getItem("token");
}

export const axiosInstances = axios.create({
    baseURL: baseUrl,
    headers: {
        authorization: `Bearer ${getToken()}`
    }
})

axiosInstances.interceptors.request.use((config) => {
    config.headers.authorization = `Bearer ${getToken()}`;
    return config;
});

解决方案 #

问题出在直接把包含File对象的普通对象作为请求体发送——axios默认会将请求体序列化为JSON格式，但File对象无法被JSON正常序列化，最终导致网络面板里看不到文件内容，后端也无法正确接收。

修改方式很简单，用FormData来封装文件和其他字段：

import { axiosInstances } from "./axiosInstanc"
interface upladPdfPayload {
    name: string;
    pdf: File
}
export const uploadPdfApi = async (payload: upladPdfPayload) => {
    try {
        console.log(payload);
        // 创建FormData并添加字段
        const formData = new FormData();
        formData.append('name', payload.name);
        formData.append('pdf', payload.pdf);
        
        const res = await axiosInstances.post('/pdf/upload', formData);
        return res.data;
    } catch (error: any) {
        return error.response.data;
    }
}

这样修改后，浏览器会自动以multipart/form-data格式发送请求，网络面板的Payload里就能看到name字段和PDF文件的相关信息（类型、大小等），后端也能正常解析FormData获取文件。

如果你的axios实例全局设置了固定的Content-Type头，可能会干扰自动适配，这时可以在请求时手动指定：

const res = await axiosInstances.post('/pdf/upload', formData, {
    headers: {
        'Content-Type': 'multipart/form-data'
    }
});

不过通常axios会自动识别FormData并设置正确的请求头，这一步可以省略。

内容的提问来源于stack exchange，提问作者Hemant kumar