Node.js中访问静态uploads文件夹出现Cannot GET /uploads/错误

问题描述 #

使用以下代码配置Express静态资源，端口设置为3000，但访问http://localhost:3000/uploads/时出现“Cannot GET /uploads/”错误：

import express from "express";
import path from "path";
import cors from "cors";
import bodyParser from "body-parser";
import {fileURLToPath} from 'url';
import fileRoutes from "./routes/fileuploadRoutes.js"
const app = express();
app.use(cors());
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
// console.log((path.join(__dirname, 'uploads')))
app.use(bodyParser.json());
app.use('/uploads', express.static(path.join(__dirname, '/uploads')))

解决办法 #

• 确认uploads文件夹存在且有内容
  确保项目中与入口文件同级的位置存在uploads文件夹，并且文件夹内至少有一个文件（比如test.jpg）。Express的express.static默认不会返回目录列表，直接访问文件夹路径会报错，你可以先尝试访问具体文件，比如http://localhost:3000/uploads/test.jpg，验证静态资源服务是否正常。

• 启用目录列表显示
  如果需要访问/uploads/时显示文件夹内的文件列表，需要额外配置：

  1. 先安装serve-index中间件：

     npm install serve-index
     

  2. 修改代码，添加目录列表支持：

     import serveIndex from 'serve-index';
     // ... 其他原有代码
     app.use('/uploads', express.static(path.join(__dirname, '/uploads')), serveIndex(path.join(__dirname, '/uploads')));
     

• 验证路径正确性
  取消注释代码中的console.log语句，运行项目后查看打印的路径，确认该路径确实指向你存放静态文件的uploads文件夹，避免路径拼接错误。

内容的提问来源于stack exchange，提问作者talatam sri manikanta