Pdf 在控制台中可用，但无法看到网络选项卡

Question

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;
    }
}

控制台中的值 name: '研究论文证书.pdf', pdf: 文件} 名称：《研究论文证书.pdf》 pdf：文件 最后修改：1713083292691 最后修改日期：2024 年 4 月 14 日星期日 13:58:12 GMT+0530（印度标准时间）{} 名称：《研究论文证书.pdf》 尺寸：937460 类型：“应用程序/pdf” webkit相对路径：“” [[原型]]：文件 [[原型]]：对象

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;
});

我尝试了所有检查控制台和网络选项卡，但无法解决它，我想在有效负载的网络选项卡中查看pdf

Answer 1

要使 PDF 在网络选项卡中可用，您需要在 multipart/form-data 中正确格式化它

修改uploadPdfApi函数以使用FormData：

export const uploadPdfApi = async (payload: UploadPdfPayload) => {
try {
    const formData = new FormData();
    formData.append('name', payload.name);
    formData.append('pdf', payload.pdf);

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

    return res.data;

} catch (error: any) {
        return error.response.data;
    }
};