Skip to content

静态访问

访问服务器的上传文件、css等静态资源是常用操作,本章节来掌握这方面知识。

单独定义

使用NestJs配置非常简单,在main.ts主文件中定义

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

async function bootstrap() {
	//传递类型NestExpressApplication
  const app = await NestFactory.create<NestExpressApplication>(AppModule)
  ...
  //静态资源访问
  app.useStaticAssets('uploads', {prefix: '/uploads'})
  await app.listen(3000)
}
bootstrap()

当访问 localhost:3000/uploads/banmashou.jpeg 时,将显示项目要 uploads/banmashou.jpeg 的图片文件。

批量定义

下面批量将 src 目录下的所有子目录中的 vue/dist 目录定义为可静态访问的目录


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

async function bootstrap() {
	//传递类型NestExpressApplication
  const app = await NestFactory.create<NestExpressApplication>(AppModule)
  ...
  //批量定义访问目录,同步遍历 src目录
  readdirSync(join(process.cwd(), 'src')).forEach((dir) => {
    //判断是否为目录
    const isDir = statSync(join(process.cwd(), 'src', dir)).isDirectory()
    if (isDir) {
      //定义静态访问目录
      app.useStaticAssets(join(process.cwd(), 'src', dir, 'vue/dist'), {
        prefix: `/static/${dir}`,
      })
    }
  })
  await app.listen(3000)
}
bootstrap()

比如我们有图片文件 src/article/vue/dist/banmashou.jpeg ,现在可以使用 http://location:3000/static/article/banmashou.jpeg 访问了