参考
大神的这两篇文章讲的很详细,这里自己也来试一下
小满nestjs(第十三章 nestjs 上传图片-静态目录)
上传图片
安装包
需要:multer 和 @nestjs/platform-express,后者nestJs自带了
npm i multer
npm i @types/multer
创建文件上传模块
nest g res upload
在upload.module.ts中引入相应的包
import {
Module } from '@nestjs/common';
import {
UploadService } from './upload.service';
import {
UploadController } from './upload.controller';
//文件上传需要的包
import {
MulterModule } from '@nestjs/platform-express';
import {
diskStorage } from 'multer';
import {
join, extname } from 'path';
@Module({
//里面有register 和 registerAsync 两个方法,前者是同步的,后者是异步的
imports: [MulterModule.register({
//图片上传完要存放的位置
storage: diskStorage({
destination: join(__dirname, '../images'),//存放的文件路径
filename: (req, file, callback) => {
//重新定义文件名,file.originalname 文件的原始名称
// extname 获取文件后缀
const fileName = `${
new Date().getTime() + extname(file.originalname)}`;
//返回新的名称,参数1是错误,这里用null就好
return callback(null, fileName)
}
}),
}
)],
controllers: [UploadController],
providers: [UploadService]
})
export class UploadModule {
}
重新启动一下项目,可以看到在dist
目录下生成了images
目录
使用
修改upload.controller.ts
文件
import {
Controller, Post,UseInterceptors,UploadedFile } from '@nestjs/common';
import {
UploadService } from './upload.service';
// FileInterceptor用于单文件上传,FilesInterceptor用于多文件上传
import {
FileInterceptor,FilesInterceptor} from '@nestjs/platform-express'
@Controller('upload')
export class UploadController {
constructor(private readonly uploadService: UploadService) {
}
@Post('album')
// UseInterceptors 处理文件的中间件,file是一个标识名
@UseInterceptors(FileInterceptor('file'))
// UploadedFile装饰器是用于读取文件的
upload (@UploadedFile() file) {
console.log("file:",file)
return true
}
}
大佬用的测试工具是:Apifox,可以自行下载。下载完进行如下配置
参数名必须与:@UseInterceptors(FileInterceptor('file'))
对应
可以看到返回值与我们在代码里写的返回值是一致的,同时在项目里也可以找到该文件
配置静态文件的访问
虽然图片已经上传成功了,但是现在还是无法直接访问,还需要配置静态文件的访问
修改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() {
// const app = await NestFactory.create(AppModule); // 最初的代码
const app= await NestFactory.create<NestExpressApplication>(AppModule)
//配置静态文件访问目录
app.useStaticAssets(join(__dirname,'images'),{
prefix:"/files/"
})
app.useStaticAssets(join(__dirname,'..','public'),{
// 配置虚拟路径
prefix:"/files/"
})
await app.listen(3000);
}
bootstrap();
注意: 这里有个坑,大佬没有讲到(当然大佬可能觉得不用讲,但是我这样的小白就遇到了)。如果路径配置的有问题,是无法访问到图片的。
app.useStaticAssets(join(__dirname,'images'),{
prefix:"/files/"
})
上面这个是访问根目录下的images
文件夹下的图片,这里的根目录是dist
目录,是打包后的目录
app.useStaticAssets(join(__dirname,'..','public'),{
// 配置虚拟路径
prefix:"/files/"
})
还是以dist
目录为根目录,..
是上一层目录,所以找的文件夹是
下载图片
download 直接下载
import {
Controller, Post, UseInterceptors, UploadedFile, Get, Res } from '@nestjs/common';
import {
UploadService } from './upload.service';
// FileInterceptor用于单文件上传,FilesInterceptor用于多文件上传
import {
FileInterceptor, FilesInterceptor } from '@nestjs/platform-express'
import type {
Response } from 'express'
import {
join} from 'path'
@Controller('upload')
export class UploadController {
constructor(private readonly uploadService: UploadService) {
}
@Post('album')
// UseInterceptors 处理文件的中间件,file是一个标识名
@UseInterceptors(FileInterceptor('file'))
// UploadedFile装饰器是用于读取文件的
upload(@UploadedFile() file) {
console.log("file:", file)
return true
}
// 文件下载
@Get('export')
download(@Res() res: Response) {
//正常应该是从数据库里获取地址
const url=join(__dirname,'../images/1675781518442.jpg')
res.download(url)
}
}