向服务器请求图片时返回无效字符问题求助

核心问题：Content-Type设置错误 #

你的代码里存在一个致命错误：res.set('Content-Type', image/${contentType});。因为contentType变量已经是完整的MIME类型（比如image/jpg），这样拼接后会生成image/image/jpg这种无效的Content-Type值，浏览器无法正确识别图片格式，于是把二进制图片数据当成文本渲染，出现乱码/无效字符。

其他潜在问题 #

1. 回调式fs.readFile和外层async函数风格不匹配，代码嵌套冗余
2. 相对路径./uploads/${file}可能因服务运行的工作目录变化导致文件找不到
3. 未处理非图片格式的情况，可能导致Content-Type为undefined

修正后的代码 #

import path from 'path';
import fs from 'fs/promises'; // 使用Promise版本的fs，适配async/await

export const getFile = async (req, res) => {
    try {
        const { userId } = req.user;
        const user = await UserModel.findById(userId);
        if (!user) {
            return res.status(404).json({ error: 'User not found' });
        }
        const { file } = user;  // file: '647ac7d78a0fc8271234ac69--Char (2).jpg'

        const mimeType = path.extname(file).toLowerCase(); // 转小写避免大小写匹配问题
        let contentType;
        switch (mimeType) {
            case '.png': 
                contentType = 'image/png'; 
                break;
            case '.jpg':
            case '.jpeg': 
                contentType = 'image/jpeg'; // jpg和jpeg统一用标准MIME类型
                break;
            default:
                return res.status(400).json({ error: 'Unsupported file type' });
        }

        // 生成绝对路径，避免工作目录变化影响文件查找
        const imagePath = path.resolve(process.cwd(), 'uploads', file);

        try {
            const data = await fs.readFile(imagePath);
            res.set('Content-Type', contentType); // 直接使用完整的Content-Type值
            res.send(data);
        } catch (readErr) {
            console.error(readErr);
            return res.status(404).send('File not found');
        }
    } catch (error) {
        console.error(error);
        res.status(500).send('Internal Server Error');
    }
};

关键修改点说明 #

• 修复Content-Type：直接使用contentType变量，不再额外添加image/前缀
• 统一JPEG类型：将.jpg和.jpeg统一映射为标准的image/jpeg类型
• 使用绝对路径：通过path.resolve生成绝对路径，确保无论服务运行在哪个目录都能定位到文件
• 改用async/await风格：替换回调式fs.readFile为fs.promises.readFile，代码更简洁易维护
• 增强错误处理：单独处理文件读取错误，返回更精准的404状态码（文件不存在时），而非统一的500
• 处理未知格式：添加default分支，提前返回不支持的文件类型错误

内容的提问来源于stack exchange，提问作者Sapphire Smith