我来帮你梳理下问题根源，再给出几个实际可行的解决办法——这些都是我在项目里实践过的，应该能快速解决你的问题：

为什么你的访问方式会失败？ #

• HTTP访问失败：你的Node.js服务器没有把uploads目录配置为静态资源目录，当你请求http://localhost:3000/uploads/img/image1.png时，服务器不知道这个路径对应本地的哪个文件，自然会返回404。
• file协议访问失败：浏览器出于安全限制，不允许网页通过file://协议访问本地磁盘文件（除非是直接打开本地HTML文件的场景），而且你的路径是相对路径，浏览器也无法定位到正确的磁盘位置。

可行解决方案 #

方案1：配置静态资源服务（最常用、最简单） #

如果用的是Express框架，只需要一行代码就能把uploads目录设为静态资源目录，让服务器自动处理该目录下的文件请求：

const express = require('express');
const app = express();

// 关键：将本地uploads目录映射到HTTP路径/uploads
app.use('/uploads', express.static('uploads'));

配置完成后，你再访问http://localhost:3000/uploads/img/image1.png，服务器就会自动返回本地uploads/img/image1.png的文件内容，完全符合你的需求。

方案2：自定义路由返回图片（适合需要权限控制的场景） #

如果不想直接暴露你的文件目录结构，或者需要对图片访问做权限校验，可以写一个专门的路由来读取并返回图片：

const fs = require('fs');
const path = require('path');
const express = require('express');
const app = express();

app.get('/images/:filename', (req, res) => {
  const filename = req.params.filename;
  // 拼接本地文件的绝对路径
  const filePath = path.join(__dirname, 'uploads/img', filename);

  // 先检查文件是否存在
  fs.access(filePath, fs.constants.F_OK, (err) => {
    if (err) {
      return res.status(404).send('图片不存在');
    }

    // 根据文件扩展名设置正确的Content-Type
    const ext = path.extname(filename).toLowerCase();
    let contentType = 'image/png';
    if (ext === '.jpg' || ext === '.jpeg') {
      contentType = 'image/jpeg';
    } else if (ext === '.gif') {
      contentType = 'image/gif';
    }

    res.setHeader('Content-Type', contentType);
    // 用流式返回文件，比一次性读取更高效
    const fileStream = fs.createReadStream(filePath);
    fileStream.pipe(res);
  });
});

这时你数据库里只需要存图片文件名（比如image1.png），访问http://localhost:3000/images/image1.png就能拿到图片，还能在路由里加权限判断（比如登录校验），适合需要保护图片的场景。

方案3：优化数据库存储的路径格式 #

建议你存到数据库的路径不要用完整的uploads/img/image1.png，而是存相对uploads的路径，比如img/image1.png。这样不管服务器部署在哪个目录，都能通过静态资源路径拼接访问，避免因为工作目录变化导致路径失效。

比如处理上传后的路径：

// 假设req.file.path是uploads/img/image1.png
const relativePath = req.file.path.replace('uploads/', '');
// 存relativePath到数据库，即img/image1.png

之后访问时直接用http://localhost:3000/uploads/${relativePath}即可。

额外注意事项 #

• 确保uploads文件夹的权限正确，服务器进程要有读取该文件夹的权限；
• 永远不要在Web应用里用file://协议访问图片，这只适用于本地调试静态HTML的场景，部署到服务器后完全不可行；
• 如果是大文件，优先用流式返回（方案2里的createReadStream），避免占用过多内存。

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