7、NestJS文件上传、单个文件上传、多个文件上传

一、 NestJS file-upload 官方文档

https://docs.nestjs.cn/8/techniques?id=%e6%96%87%e4%bb%b6%e4%b8%8a%e4%bc%a0

二、单个、多个文件上传

import { Body, Controller, Get, Post, Render, UseInterceptors, UploadedFile, UploadedFiles } from '@nestjs/common';
import { FileFieldsInterceptor, FileInterceptor, FilesInterceptor } from '@nestjs/platform-express'; // 上传文件
import { createWriteStream } from 'fs'; // node 自带的文件模块
import { join } from 'path'; // 使用 join 拼接路径
@Controller('upload')
export class UploadController {
    @Get()
    @Render('default/upload')
    index() {
    }
    // 单个文件上传
    @Post('doAdd')
    @UseInterceptors(FileInterceptor('pic')) // pic 是上传文件的name属性
    doAdd(@Body() body, @UploadedFile() file) {
        console.log(body)
        console.log(file) // 上传图片的信息
        var writeStream = createWriteStream(join(__dirname, '../../public/upload', `${Date.now()}-${file.originalname}`))
        writeStream.write(file.buffer)
        return '上传图片成功'
    }
    // 多个文件上传name属性一样
    @Post('doAdd')
    @UseInterceptors(FilesInterceptor('pic')) // 上传多个文件时，如果name属性一样就直接使用FilesInterceptor即可
    doAdds1(@Body() body, @UploadedFiles() files) {
           // files 返回的是个数组
        for (const file of files) { // 遍历数组
            const writeImage = createWriteStream(join(__dirname, '../../', 'public/upload', `${body.title}-${Date.now()}-${file.originalname}`));
            writeImage.write(file.buffer);
        }
        return '上传图片成功'
    }
    // 多个文件上传name属性不一样
    @Post('doAdds')
    @UseInterceptors(FileFieldsInterceptor([ // 上传多个文件时，如果name属性不一样就直接使用FileFieldsInterceptor即可
        { name: 'pic1', maxCount: 1 },
        { name: 'pic2', maxCount: 1 },
        { name: 'pic3', maxCount: 1 },
    ]))
    doAdds2(@Body() body, @UploadedFiles() files) {
        // files 返回的是个对象
        for (const i in files) { // 遍历对象
            const file = files[i][0]
            const writeImage = createWriteStream(join(__dirname, '../../', 'public/upload', `${body.title}-${Date.now()}-${file.originalname}`));
            writeImage.write(file.buffer);
        }
        return '上传图片成功'
    }
}

三、注意事项

• 上传图片的时候 From 表单中需要配置 enctype=”multipart/form-data”

  <form action="upload/doAdd" method="post" enctype="multipart/form-data">
      <input type="text" name="title1" id="" placeholder="新闻标题"><br><br>
    <input type="text" name="keywords" id="" placeholder="关键词"><br><br>
    <input type="text" name="author" id="" placeholder="作者"><br><br>
        <input type="file" name="pic" id=""><br><br>
        <input type="submit" value="提交">
  </form>