如何使用Nest.js实现上传和下载文件

496 阅读1分钟

上传文件

依赖包

npm i multer -S
npm @types/multer -D

第一步,注册存放图片的目录

注册的目录每一次重新运行后上传的文件会被清空

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 { extname, join } from 'path';

@Module({
  imports: [MulterModule.register({
    storage: diskStorage({
    // dist/images,相对于upload来说是../
      destination: join(__dirname, '../images'),
      filename: (_, file, callback) => {
        console.log(file.originalname);
        const fileName = `${new Date().getTime() + extname(file.originalname)}`
        return callback(null, 'demo.png')
      }
    })
  })],
  controllers: [UploadController],
  providers: [UploadService],
})
export class UploadModule { }

第二步,编写上传文件的方法

import { Controller, Get, Post, UseInterceptors, UploadedFile, Res } from '@nestjs/common';
import { UploadService } from './upload.service';
import { FileInterceptor, FilesInterceptor } from '@nestjs/platform-express'

@Controller('upload')
export class UploadController {
  constructor(private readonly uploadService: UploadService) { }

  // 上传图片
  @Post("pic")
  @UseInterceptors(FileInterceptor("file"))
  uploadPic(@UploadedFile() file) {
    console.log(file);
    return "xxx"
  }
}

下载文件

使用download下载

nest.js

import type { Response } from 'express'
import { join } from 'path';

@Get('download')
download(@Res() res: Response) {
  // 从upload中往上层走,所有使用..
  const url = join(__dirname, '../images/demo.png')
  res.download(url)
}

html

window.open("http://localhost:3000/upload/download")

使用文件流下载

nest.js

import { zip } from 'compressing';

@Get('stream')
async download_stream(@Res() res: Response) {
  // 从upload中往上层走,所有使用..
  const url = join(__dirname, '../images/demo.png')
  const tarStream = new zip.Stream()
  await tarStream.addEntry(url)
  res.setHeader('Content-Type','application/octet-stream')
  res.setHeader('Content-Disposition',`attachment;filename=demo`
  tarStream.pipe(res)
}

vue3

<script setup lang="ts">

const useFetch = async (url:string) => {
  const res = await fetch(url).then(res => res.arrayBuffer())
  console.log(res);
  const a = document.createElement('a')
  a.href = URL.createObjectURL(new Blob([res],{

  }))
  a.download = 'demo.zip'
  a.click()
}

const download = ()=>{
  useFetch('http://localhost:3000/upload/stream')
}
</script>

配置静态资源访问路径

// 配置静态资源的访问目录 , dist/images 
// 配置前缀, 此项为可选
app.useStaticAssets(join(__dirname, "images"),{prefix: '/nest'})