Node Fastify访问upload文件夹图片返回404错误如何解决

报错原因 #

• 路由路径不匹配：你在properties路由组下定义的路径是/images/:name，拼接路由前缀后实际生效的路径是/properties/images/[图片名]，和需求要求的/properties/files/[图片名]路径段不一致，所以触发404报错。
• 配置冗余：全局注册的fastify-static插件没有指定前缀，静态资源默认在根路径生效，和你自定义的路由逻辑重复，也可能带来路由匹配优先级冲突。

修复方案 #

方案1：调整fastify-static配置（推荐，无需单独写路由） #

直接修改index.js中的静态资源注册逻辑，加上prefix参数匹配需求路径，同时删除properties.js中的/images/:name自定义路由即可：

// index.js 调整后的静态资源注册代码
import Fastify from "fastify";
import FastifyStatic from "fastify-static";
import path from "path";
import { propertiesRoutes } from "./routes/properties.js";
...
export const fastify = await Fastify({ logger: process.env.LOGGER || true });

const __dirname = path.resolve(path.dirname(""));
fastify.register(FastifyStatic, {
  root: path.join(__dirname, "uploads"),
  prefix: "/properties/files/" // 新增这行，直接匹配需求的访问前缀
});
fastify.register(propertiesRoutes, { prefix: "/properties" });
...

调整后直接访问localhost:8000/properties/files/1635843023660-profile.jpg即可正常获取图片。

方案2：调整自定义路由路径 #

如果要保留手动处理静态文件的逻辑，只需要修改properties.js中的路由路径即可：

// routes/properties.js 调整后的路由代码
import path from "path";
export const propertiesRoutes = function (fastify, opts, done) {
  ...
  // 把路径从/images/:name改成/files/:name
  fastify.get("/files/:name", (req, res) => {
    // 用path.join拼接路径避免跨操作系统路径符错误
    res.sendFile(path.join(process.cwd(), "uploads", req.params.name));
  });
  done();
};

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