使用 ExpressJS Typescript NodeJS 服务 static 个文件

Question

我正在尝试使用 Typescript 服务使用 ExpressJS 和 NodeJS 上传的 static 文件，但出现 404 错误。

我想阅读的文件是./src/data/uploads/test.txt，我正试图直接从 web 浏览器访问它。

注意：当我在 Javascript 中执行此操作时，它有效但在 Typscript 中无效。

index.ts 文件（应用程序入口点）

import express from 'express';
import bodyParser from 'body-parser';
import helmet from 'helmet';
import {cdg, config} from './utils';
import {Mongoose} from './db/monogdb';
import { setRoutes } from './routes/route.decorators';
import cors from 'cors';
import './routes';

const app = express();

app.use(helmet());
app.use(cors());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());
app.use('/ftp', express.static('data/uploads'));

setRoutes(app);

app.listen(config.server.port, () => {
    cdg.konsole("Server connected! :: " + config.server.port + "!");
});

有没有一种特定的方法可以用 Typescript 服务 static 文件？

Answer 1

这是express.static()的工作原理。 您显然缺少其中一个步骤，但您的问题缺少详细信息来准确识别哪个步骤不正确。

首先，您定义一个包含一些参数的express.static()中间件。 在您的情况下，您已经定义了这个：

app.use('/ftp', express.static('data/uploads'));

有四个因素决定了它是如何工作的：

1. /ftp必须位于任何 URL 的开头，此中间件才能匹配。
2. 传入的 URL 请求以及它是如何由浏览器根据您在 HTML 中指定的方式形成的。
3. 当前工作目录与data/uploads相结合以创建完整路径引用，或者您可以构建自己的绝对路径而不依赖于 cwd。
4. cwd + /data/uploads中的文件express.static()将尝试匹配传入的 URL 的路径。

让我们进一步研究这些：

您的中间件将首先只查看以/ftp开头的 URL。 然后，对于它看到确实以/ftp开头的任何 URL，它应该将 URL 的 rest 和 append 带到data/uploads ，并看到它在本地文件系统中找到匹配的文件。 它将在请求时使用服务器进程中的当前工作目录来尝试解析相对路径data/uploads 。 当前工作目录（如果您没有以编程方式更改它）将取决于您的应用程序是如何启动的。

因此，如果您使用node index.js启动您的应用程序，那么当前工作目录将是index.js所在的目录，并且 express static 将在“index.js”所在的data/uploads子目录中查找.

那么，我们需要看看指定这个static资源的HTML标签是如何指定的。

例如，假设这是一个<img>标签。 如果您指定这样的内容：

 <img src="/ftp/hello.jpg">

然后，浏览器将向您的服务器创建一个请求/ftp/hello.jpg 。 由于它确实以/ftp开头，因此您的express.static()中间件将采用路径/hello.jpg的 rest 和data/uploads的 append 并构建如下所示的路径：

path.join(process.cwd(), 'data/uploads', '/hello.jpg')

并且，它将在您的本地文件系统中查找生成的文件。 如果它找到该文件，那么它将提供该文件并将其作为响应返回。 如果它没有找到那个确切的文件，那么它将调用next()并继续路由到您的其他路由处理程序。

有一些常见的错误（go 错误的东西）：

1. 您没有在 web 页面中指定正确的 URL 与您的express.static()中间件行（包括您的中间件指定的/ftp前缀）对齐。

2. 您的中间件没有完全指向文件系统中的正确目录，因此它永远找不到任何东西。

3. 您在 web 页面中使用相对 URL，浏览器将其与 web 页面的路径相结合，导致它请求与您想要的不同的内容。 Static web 页面中的资源 URL 几乎总是以/开头，因此它们不依赖于父页面的路径。

4. 这些文件在您使用中间件指向的文件层次结构中的位置不太正确（通常相差一层）。

---

我要提到的另一件事。 由于您使用的是 TypeScript，这意味着您必须先将脚本编译/构建为 regular.js 脚本，然后才能运行。 这通常位于不同的目录位置。

这个不同的目录位置让您有机会不引用 static 资源所在的正确目录，因为它们可能相对于您的 TypeScript 文件，而不是您正在运行的构建的 Javascript 文件（这取决于您的构建脚本） .

同样，如果您向我们展示文件系统中的所有内容（TypeScript 文件、构建的 JS 文件、static 资源）以及引用 static 资源的 HTML 标签是什么样的，我们可以帮助您更具体地进行调试。

Answer 2

在我的例子中，我这样解决了我的问题：在相对于目录路径的参数中，我使用了 path.resolve，在它的第一个参数中，我使用了 __dirname 作为第一个参数，目标目录的相对路径作为第二个参数。

app.get('/', express.static(path.resolve(__dirname, '../static/'))); –