javascript 如何在NestJS中提供静态图像

enyaitl3 于 2023-02-15 发布在 Java

关注(0)|答案(9)|浏览(250)

我开始学习MEAN stack，当我去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

来源：https://stackoverflow.com/questions/63429380/how-to-serve-static-images-in-nestjs

9条答案

按热度按时间

798qvoo81#

这就是我所做的
1.在应用程序模块ts中

import { ServeStaticModule } from '@nestjs/serve-static/dist/serve-static.module';
 import { join } from 'path';

 @Module({
     imports: [
         ServeStaticModule.forRoot({
             rootPath: join(__dirname, '..', 'public'),
         }),
     ],
 })

1.然后我创建了"public"目录，与"src"、"dir"等目录在同一级别。
1.该文件位于：https://my-url/file.jpg

赞(0）回复(0）举报 2023-02-15

63lcw9qa2#

使用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）

赞(0）回复(0）举报 2023-02-15

a9wyjsp73#

在NestJs中提供静态内容有两种方法。使用1或2。
1.在应用程序模块.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();

赞(0）回复(0）举报 2023-02-15

kkbh8khc4#

ts将“uploads”替换为你的目录名app.use（'/uploads'，express.static（join（process.cwd（），'uploads'））;

赞(0）回复(0）举报 2023-02-15

qrjkbowd5#

@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）回复(0）举报 2023-02-15

wa7juj8i6#

分离模块解决方案，然后将其导入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）回复(0）举报 2023-02-15

yhqotfr87#

利用本模块进行单据嵌套的主要方法如下：

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）回复(0）举报 2023-02-15

qncylg1j8#

我也有同样的问题。我也在这个问题上挣扎了很长时间。例如：您有图片上传文件夹。在应用程序模块中您需要使用它：

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

本地主机：3000/图片.png
如果不使用“客户端”文件夹，我图片将

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

本地主机：3000/客户端/图片.png

赞(0）回复(0）举报 2023-02-15

ercv8c1e9#

你也可以在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/

赞(0）回复(0）举报 2023-02-15

我来回答

javascript 如何在NestJS中提供静态图像

9条答案

相关问题

热门标签

最新问答