如何在NestJS中提供静态图像

问题描述 投票：0回答：13

我开始学习 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 路由？

谢谢大家。

javascript node.js express mean-stack nestjs
13个回答
25
投票

这就是我所做的：

  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'),
         }),
     ],
 })

  2. 然后我在与“src”、“dir”等相同的级别上创建了“public”目录。

  3. 该文件位于：https://my-url/file.jpg

19
投票

使用 

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
）

4
投票

有两种方式在 

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
投票

您可以移动到根目录，如果您的上传文件夹位于 rootdir 中，则将文件夹路径放入 renderPath 中，如下所示。

ServeStaticModule.forRoot({
  rootPath: join(__dirname, '../../'),
  renderPath: '/uploads',
})
2
投票

我也有同样的问题。我也为这个问题苦苦挣扎了很长一段时间。 例如：您有图片的上传文件夹。 在 App.module 中你需要使用它：

    ServeStaticModule.forRoot({
  rootPath: join(__dirname, '..', 'client'),
}),

本地主机：3000/图片.png

如果我在没有“客户端”文件夹的情况下使用，我的图片是

ServeStaticModule.forRoot({
  rootPath: join(__dirname, '..'),
}),

本地主机：3000/client/picture.png

1
投票

在

app.module.ts
：

@Module({
    imports: [
      ServeStaticModule.forRoot({
        rootPath: join(__dirname, ".."),
        renderPath: "public",
      }),
    ],
})
export class AppModule {}


rootPath
- 静态文件根目录。默认值：“客户端” 
renderPath
- 渲染静态应用程序的路径（与serveRoot值连接）。默认值：*（通配符 - 所有路径）。
（https://www.npmjs.com/package/@nestjs/serve-static）

您应该将 
rootPath
设置为项目根目录，将 
renderPath
设置为静态文件。
0
投票

将其添加到 main.ts 将“uploads”替换为您的目录名称 app.use('/uploads',express.static(join(process.cwd(), 'uploads')));

0
投票

@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
供应。

0
投票

单独的模块解决方案，然后导入到AppModule中。

import { Module } from '@nestjs/common';
import { ServeStaticModule } from '@nestjs/serve-static';
import { resolve } from 'path';

@Module({
    imports: [
        ServeStaticModule.forRoot(
            (() => {
                const publicDir = resolve('./public/files/');
                const servePath = '/files';

                return {
                    rootPath: publicDir,
                    // serveRoot - if you want to see files on another controller,
                    // e.g.: http://localhost:8088/files/1.png
                    serveRoot: servePath,
                    exclude: ['/api*'],
                };
            })()
        ),
    ],
})
export class PublicModule {}
0
投票

使用该模块进行文档嵌套的主要方法如下：


 ServeStaticModule.forRoot({
    rootPath: join(__dirname, '..', 'upload'),   //  path to the static files image
 }),

但是如果你搜索

index.html
出现错误，你可以使用这个方法，我也用过

main.ts

import * as express from 'express';

app.use(express.static(join(__dirname, '../upload')))
0
投票

要在 NestJS 应用程序中提供静态文件（包括图像），您可以使用 Express 框架提供的 

express.static
中间件，该中间件已集成到 NestJS 中。设置方法如下：

  1. 在项目目录中创建一个文件夹来存储您的公共图像。例如，您可以在项目的根级别创建一个名为 

    public
    的文件夹。

  2. 将图像移至

    public
    文件夹中。如有必要，您可以将它们组织到子目录中。

  3. 打开 NestJS 应用程序根目录中的 

    main.ts
    （或 
    main.js
    ）文件。

  4. 从 

    express
    包中导入 
    @nestjs/platform-express
    模块，并从路径模块中导入 join 函数。

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import { NestExpressApplication } from '@nestjs/platform-express';
import * as express from 'express';
import { join } from 'path';

async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);

  // Add the following code
  app.use('/static', express.static(join(__dirname, '..', 'public')));

  await app.listen(3000);
}
bootstrap();

  1. 在上面的代码中，当 URL 以 

    /static
    开头时，我们告诉应用程序从公共文件夹提供静态文件。您可以将 
    /static
    部分更改为您想要的任何 URL 前缀。

  2. 您可以使用 URL 模式访问您的公共图像：http://localhost:3000/static/image.jpg

0
投票
import { ServeStaticModule } from '@nestjs/serve-static';
import { join } from 'path';

@Module({
  imports: [
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', '/uploads/public'),
      serveStaticOptions: { index: false },
    }),
  ],
})
export class AppModule {}

这将提供来自 /dist/uploads/public/ 的图像

您可以从 http://localhost:3000/x.jpg 访问文件或图像

-1
投票

您也可以在nest js中使用express static模块。

// ...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/

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.