如何在 NestJS 中提供静态图像
Posted
技术标签:
【中文标题】如何在 NestJS 中提供静态图像【英文标题】:How to serve static images in NestJS 【发布时间】:2020-12-05 07:44:06 【问题描述】:我开始学习 MEAN 堆栈,当我去 Express 时,我看到 express 框架中存在一个额外的层,称为 NestJS。它拥有我想要的一切,并且具有类似 Angular 的语法,因此对我来说非常完美。
但是每一个新步骤都是一场噩梦,文档一点用都没有。现在我正在与框架进行斗争以实现提供图像并且不使用 API 进行此类调用。
我尝试了所有在互联网上找到的,例如:
main.ts
import NestFactory from '@nestjs/core';
import AppModule from './app.module';
import * as bodyParser from 'body-parser';
import * as express from 'express';
import join from 'path';
import NestExpressApplication from '@nestjs/platform-express';
declare const module: any;
async function bootstrap()
const app = await NestFactory.create<NestExpressApplication>(AppModule);
app.useStaticAssets(join(__dirname, '..', 'public'));
app.enableCors(
origin: true,
methods: 'GET,HEAD,PUT,PATCH,POST,DELETE,OPTIONS',
credentials: true,
);
//I tried this 2 options (https://docs.nestjs.com/techniques/mvc) (https://whatthecode.dev/serve-static-files-with-nest-js/)
app.use('/resources', express.static(process.cwd() + '\\resources'));
app.useStaticAssets(join(__dirname, '..', '\\public'));
app.use(bodyParser.json( limit: '50mb' ));
app.use(bodyParser.urlencoded( limit: '50mb', extended: true ));
//console.log(process.cwd());
await app.listen(3000);
if (module.hot)
module.hot.accept();
module.hot.dispose(() => app.close());
bootstrap();
我试图把它放在 app.module 中(它有效,但总是在寻找 index.html 而不是图像):
import AnimalsModule from './animals/animals.module';
import SpeciesModule from './species/species.module';
import AuthModule from './auth/auth.module';
import UsersModule from './users/users.module';
import BreedModule from './breed/breed.module';
import StateModule from './state/state.module';
import PhotoModule from './photo/photo.module';
@Module(
imports: [
ServeStaticModule.forRoot(
rootPath: join(__dirname, '..', 'public'), // <-- path to the static files
),
TypeOrmModule.forRoot(
type: 'mysql',
host: 'localhost',
port: 3306,
username: 'root',
password: '',
database: 'nest',
entities: [__dirname + '/**/*.entity.ts,.js'],
synchronize: true,
),
AnimalsModule,
SpeciesModule,
BreedModule,
StateModule,
AuthModule,
UsersModule,
PhotoModule,
],
)
//It seems that ignores this register and just uses the method signature options
@Module(
imports: [MulterModule.register(
dest: './resources/tmp',
limits: fieldSize: 25 * 1024 * 1024 * 1024, fileSize: 25 * 1024 * 1024 * 1024
)],
controllers: [AppController],
providers: [AppService],
)
export class AppModule
我怎么能提供图像或文件并避免 api 路由?
谢谢大家。
【问题讨论】:
鉴于这样的配置(看起来不错),您能否分享您的静态文件夹public
目录结构和您尝试过的一些静态资产的简单 GET?
嗨,我有这个结构:project/resources /tmp /files project/public(只是为了尝试这个名称,因为在示例中更常见)我的 GET 请求放在浏览器中localhost:3000/resources/a.jpg 或公用文件夹。如果您需要其他事情,请告诉我。非常感谢
但是,您将 rootPath 配置如下:rootPath: join(__dirname, '..', 'public')
?
尝试将您的a.jpg
放入project/public 并通过localhost:3000/a.jpg 获取它
rootPath: join(__dirname, '..', 'public')?在原始问题的第二个文件中,我尝试了这个请求,它返回了一个 404 路由,firefox 找不到
【参考方案1】:
这就是我所做的:
在 app.module.ts 中
import ServeStaticModule from '@nestjs/serve-static/dist/serve-static.module';
import join from 'path';
@Module(
imports: [
ServeStaticModule.forRoot(
rootPath: join(__dirname, '..', 'public'),
),
],
)
然后我创建了与“src”、“dir”等相同级别的“public”目录。
文件位于:https://my-url/file.jpg
【讨论】:
我已经这样做了,但是有这个错误“ENOENT:没有这样的文件或目录”它是显示文件在 \dist\public\index.html 中找不到【参考方案2】:使用useStaticAssets()
方法(ServeStaticModule
用于提供静态内容,例如 SPA)。
因此,作为一个最小示例,您的 main.ts
应如下所示):
async function bootstrap()
const app = await NestFactory.create<NestExpressApplication>(AppModule);
app.useStaticAssets(join(__dirname, '..', 'public'));
await app.listen(3000);
在上面的示例中,您的资产是从应用程序的根目录提供的(例如 http://localhost:3000/example.png
。
您还可以将选项传递给方法,以配置提供资产的路径:
app.useStaticAssets(join(__dirname, '..', 'public'),
prefix: '/public/',
);
在此示例中,您的路径以 public
为前缀(例如 http://localhost:3000/public/example.png
)
【讨论】:
【参考方案3】:在NestJs
中提供静态内容有两种方式。使用1
或2
。
1.在app.module.ts
中使用ServeStaticModule
import Module from '@nestjs/common';
import ServeStaticModule from '@nestjs/serve-static';
import join from 'path';
import mainModule from 'process'
@Module(
imports: [
ServeStaticModule.forRoot(
rootPath: join(__dirname, '..', 'public'),
),
],
)
export class AppModule
2.在 main.ts 中使用NestExpressApplication
[即使默认情况下 Nest Js 仅使用 Express ]
import NestFactory from '@nestjs/core';
import NestExpressApplication from '@nestjs/platform-express';
import join from 'path';
import AppModule from './app.module';
async function bootstrap()
const app = await NestFactory.create<NestExpressApplication>(
AppModule,
);
app.useStaticAssets(join(__dirname, '..', 'public'));
await app.listen(3000);
bootstrap();
【讨论】:
【参考方案4】:将此添加到 main.ts 用您的目录名称替换“上传” app.use('/uploads',express.static(join(process.cwd(), 'uploads')));
【讨论】:
您能编辑一下并解释原因吗?在这种情况下,这也将有助于其他人发现这个问题,因为最初的提问者很可能在 10 个月后已经解决了这个问题;)【参考方案5】:@pzabrocki 的想法让我想到了以下最小的工作存储库:https://gitlab.com/hadrien-toma/nest-static-files
玩它:
git clone https://gitlab.com/hadrien-toma/nest-static-files
yarn install
yarn run start
然后my-file.json
服务于http://localhost:3333/my-file.json
。
【讨论】:
【参考方案6】:你也可以在nest js中使用express静态模块。
// ...imports
import * as express from 'express';
import join from 'path';
async function bootstrap()
const app = await NestFactory.create(AppModule);
// serve static assets from the client/dist folder, change this to the correct path for your project
app.use(express.static(join(process.cwd(), '../client/dist/')));
//... you config
await app.listen(process.env.PORT);
bootstrap();
感谢:https://whatthecode.dev/serve-static-files-with-nest-js/
【讨论】:
以上是关于如何在 NestJS 中提供静态图像的主要内容,如果未能解决你的问题,请参考以下文章
如何动态更改 Mongoose 提供程序中的集合或数据库的名称,Nestjs?