如何从 MongoDB 上传和获取 PDF 文件

Question

我将文件作为表单数据发布，但是当我获取数据时，我收到一个返回损坏的 PDF 文件的 blob。我的目标是将文件作为二进制数据存储在 Mongodb 中并在浏览器中显示。

React 前端中的 Axios POST

const handleSubmit = async (e) => {
        if (configuration) {
            axios(configuration)
                .then(async (res) => {
                    console.log(res);
                    const id = res.data.result._id;
                    try {
                        const formData = new FormData();
                        formData.append('filename', licenseNo)
                        formData.append('file', file);
                        const res = await axios.post(`url/file/${id}`, formData, {
                            headers: {
                                'Content-Type': 'multipart/form-data'
                            }
                        });
                        console.log(res.data);
                    } catch (err) {
                        console.error(err);
                    }
                    navigate('/');
                })
                .catch((error) => {
                    console.log(error.message);
                });
        }
    }

PDF模型

const mongoose = require('mongoose');

const pdfSchema = new mongoose.Schema({
    refId: {
        type: String,
        required: true,
        unique: false,
    },
    name: {
        type: String,
        required: true,
    },
    data: {
        type: Buffer,
        required: true,
    },
});

module.exports = mongoose.model('PDF', pdfSchema);

PDF POST 路线

router.post('/:id', upload.single('file'), (req, res, next) => {
    const filePath = req.file.path;
    const pdfName = req.body.filename + '_' + req.file.originalname;
    const pdfData = fs.readFileSync(filePath);
    const newPDF = new PDF({
        refId: req.params.id,
        name: pdfName,
        data: pdfData,
    });
    newPDF.save()
        .then(result => {
            res.status(201).json({
                message: 'PDF uploaded successfully!',
                pdf: result
            });
        })
        .catch(err => {
            console.error(err);
            res.status(500).json({ error: err });
        });
});

PDF 获取路线

router.route('/:id').get((req, res) => {
    PDF.find({ refId: req.params.id })
        .then((pdf) => {
            res.set({
                'Content-Type': 'application/pdf'
            }).json(pdf)
        })
        .catch((error) => res.status(400).res('Error: ' + error))
})

React 前端中的 Axios GET

axios.get(`url/file/${id}`, {
                responseType: 'blob'
            })
                .then((res) => {
                    console.log(res.data);
                    setPdfData(URL.createObjectURL(res.data));
                })
                .catch((error) => console.log(error));

上面提到的代码返回以下 blob，并且无法呈现为 PDF

使用 iframe 标签显示 PDF

Answer 1

当您使用

res.json

从服务器发送pdf时，它会发送JSON数据，因此您需要先将其转换为文件（或将blob设置为响应类型）。

尝试这样的事情（根据您的对象结构，目标

data

属性

response.data

，您不妨将内容类型放在那里，而不是标题）：

console.log(res.data);
const blob = new Blob([Int8Array.from(res.data.data)], {type:res.headers['content-type']});
setPdfData(URL.createObjectURL(blob));