我尝试服务静态文件上传使用ExpressJS和NodeJS与Typescript，但得到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？
2条答案
按热度按时间2o7dmzc51#
下面是
express.static()的工作原理，您显然遗漏了其中的一个步骤，但您的问题缺少详细信息，无法准确确定哪个步骤不正确。首先，定义一个包含一些参数的
express.static()中间件。有四个因素决定了这一点：
/ftp，必须位于任何URL的开头，以使此中间件匹配。1.传入的URL请求以及浏览器如何根据您在HTML中指定的方式形成该请求。
1.与
data/uploads组合以生成完整路径引用的当前工作目录，或者您可以构建自己的绝对路径，而不依赖于cwd。cwd + /data/uploads中的档案，express.static()会尝试比对内送URL的路径。让我们进一步了解一下：
您的中间件首先将只查看以
/ftp开头的URL，然后对于它看到的任何以/ftp开头的URL，它应该获取URL的其余部分并将其附加到data/uploads，然后查看是否在本地文件系统中找到匹配的文件。它将在请求时使用服务器进程中的当前工作目录来尝试解析相对路径data/uploads。（如果您尚未以编程方式更改它）将取决于应用的启动方式。因此，如果您使用
node index.js启动您的应用，那么当前工作目录将是index.js所在的目录，express static将在data/uploads子目录中查找'index.js'所在的目录。然后，我们需要查看如何指定指定此静态资源的HTML标记。
例如，假设这是一个
<img>标记。然后，浏览器将创建一个
/ftp/hello.jpg请求，并发送到服务器。由于该请求确实以/ftp开头，因此express.static()中间件将获取路径/hello.jpg的剩余部分，并将其附加到data/uploads，然后构建如下所示的路径：然后，它会在本地文件系统中查找结果文件，如果找到了，它会提供该文件并将其作为响应返回;如果没有找到确切的文件，它会调用
next()并继续路由到其他路由处理程序。有一些常见的错误（可能出错的事情）：
1.您没有在Web页面中指定与
express.static()中间件行对齐的正确URL（包括中间件指定的/ftp前缀）。1.您的中间件没有完全指向文件系统中的正确目录，因此它永远找不到任何内容。
1.您在网页中使用的是相对URL，浏览器将其与网页的路径组合在一起，导致它请求的内容与您所需的内容不同。网页中的静态资源URL应该几乎总是以
/开头，这样它们就不会依赖于父页的路径。1.文件在您使用中间件指向的文件层次结构中的位置不太正确（通常偏离一个级别）。
还有一件事我要提一下。因为你使用的是TypeScript，这意味着你必须在运行之前将你的脚本编译/构建成一个常规的.js脚本。这通常会在不同的目录位置。
这个不同的目录位置会让您有机会不引用静态资源所在的正确目录，因为它们可能相对于TypeScript文件而不是您正在运行的构建Javascript文件（这取决于您的构建脚本）。
同样，如果您向我们展示所有内容在文件系统中的位置（TypeScript文件、构建的JS文件、静态资源）以及引用静态资源的HTML标记的样子，我们可以更具体地帮助您调试。
6tdlim6h2#
在我的例子中，我是这样解决问题的：在相对于目录路径的参数中，我使用了path.resolve，在它的第一个参数中，我使用了__dirname作为第一个参数，使用了目标目录的相对路径作为第二个参数。