nestjs实现文件上传功能

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

补充:官方文档链接,参考代码gitee链接

  • 3
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值