NestJS怎么实现文件上传呢?
通过express的multer包实现文件上传,并且封装了一个装饰器来接收文件@UploadedFile()
官方实例
@@filename()
@Post('upload')
@UseInterceptors(FileInterceptor('file'))
uploadFile(@UploadedFile() file) {
console.log(file);
}
@@switch
@Post('upload')
@UseInterceptors(FileInterceptor('file'))
@Bind(UploadedFile())
uploadFile(file) {
console.log(file);
}
实现
在contronller中,创建一个函数接收文件,并传给service层处理
import { Controller Post,UploadedFile, UseInterceptors, HttpCode} from '@nestjs/common';
import {BaseService} from '../service/base.service'
import { FileInterceptor } from '@nestjs/platform-express';
@Controller()
export class BaseController {
constructor(private readonly base:BaseService) { }
/**
* 文件上传接口
* 只接受 .xlsx .xls jpg png mp4 文件
* @param file 文件
* @returns
*/
@Post('/uploadFile')
@HttpCode(200)
//文件拦截器
@UseInterceptors(FileInterceptor('file'))
async uploadFile(@UploadedFile() file: Express.Multer.File): Promise<ResultData>
{
return await this.base.uploadFile(file)
}
}
service:拿到文件后读写文件,并返回访问路劲
安装的包
npm install @types/uuid mime-types
import { Injectable } from "@nestjs/common";
import { ConfigService } from "@nestjs/config";
import path from "path";
import fs from "fs";
import { v4 as uuidv4 } from 'uuid';
import mime from "mime-types"
@Injectable()
export class BaseService {
//项目地址
private readonly productionUrl = process.cwd()
//上传文件路劲
private basePath = ''
//映射的虚拟路劲
private serveRoot = '/static'//文件虚拟路径, 必须以 / 开头, 如 http://localhost:8081/static/****.jpg , 如果不需要则 设置 ''
//服务器访问地址
private servePath = 'http://localhost:8081'
constructor(
private readonly config: ConfigService,
) {
const configLocation = this.config.get<string>('app.file.location') || './upload'
//使用path.normalize()函数对输入的configLocation进行路径归一化处理,确保路径字符串中没有冗余的斜杠(/)或点(.)。
//使用path.isAbsolute()函数检查configLocation是否为绝对路径,如果不是,则使用path.join()函数将其与项目地址(productionUrl)连接起来,以生成绝对路径。
this.basePath = path.normalize(path.isAbsolute(configLocation)? configLocation: path.join(this.productionUrl, configLocation))
try{
//使用fs.accessSync()方法检查给定的文件系统路径(this.basePath)是否具有写入权限。
fs.accessSync(this.basePath, fs.constants.W_OK)
}catch (error) {
throw new Error(
`文件存储路径配置 app.file.location = ${configLocation} (完整路径: ${this.basePath} ) 无写入权限,如无文件夹需要先创建一个。`,
)
}
}
async uploadFile(file: Express.Multer.File): Promise<Object> {
//接受的文件类型 xlxs xls png jpg jpeg mp4 pdf
const acceptFileType = 'application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,image/jpeg,image/png,image/jpg, video/mp4, application/pdf'
if (!acceptFileType.indexOf(file.mimetype))
return ResultData.fail(AppHttpCode.FILE_TYPE_ERROR, '文件类型错误,请上传 xlxs、xls、png、jpg、jpeg、mp4、pdf文件')
if (file.size > 5 * 1024 * 1024)
return ResultData.fail(AppHttpCode.FILE_SIZE_EXCEED_LIMIT, '文件大小超过,最大支持 5M')
// 重新命名文件, uuid, 根据 mimeType 决定 文件扩展名, 直接拿后缀名不可靠
const newFileName = `${uuidv4().replace(/-/g, '')}.${mime.extension(file.mimetype)}`
// 文件存储路径
const fileLocation = path.normalize(path.join(this.basePath, newFileName))
// fs 创建文件写入流
const writeFile = fs.createWriteStream(fileLocation)
// 写入文件
writeFile.write(file.buffer)
//关闭流
writeFile.close()
return {"code":200,"data":{"url":`${servePath}${
serveRoot || ''
}/${newFileName}`},"msg":"ok"}
}
}
AppModule中导入静态化服务
npm install @nestjs/serve-static
import { ServeStaticModule, ServeStaticModuleOptions } from '@nestjs/serve-static'
import path from 'path'
@Module({
imports: [
// 服务静态化, 生产环境最好使用 nginx 做资源映射, 可以根据环境配置做区分
ServeStaticModule.forRootAsync({
imports: [ConfigModule],
inject: [ConfigService],
useFactory: (config: ConfigService) => {
const fileUploadLocationConfig = || '../upload'
const rootPath = path.isAbsolute(fileUploadLocationConfig)
? `${fileUploadLocationConfig}`
: path.join(process.cwd(), `${fileUploadLocationConfig}`)
return [
{
rootPath,
exclude: ['/api'],//去掉前缀路劲
serveRoot: '/static',//文件虚拟路径, 必须以 / 开头, 如 http://localhost:8081/static/****.jpg , 如果不需要则 设置 ''
serveStaticOptions: {
cacheControl: true,
},
},
] as ServeStaticModuleOptions[]
},
}),
],
main.ts记得使用app.module