nestjs系列笔记

nest笔记四：文件的上传与下载

nest是基于express之上的，所以，其文件上传和下载的功能，实际上就是express的功能。

下载

文件下载有两种，一个是sendFile，一个是download。

其实download会在浏览器显示另存为...，它主要是在响应头里面加上了Content-Disposition: attachment; filename="xxxx" 告知浏览器需要下载。我用apifox测试，中文文件名乱码。抽空我再解决这个问题。
而sendFile会在浏览器显示文件，它主要是在Content-Type根据文件名的扩展名设置响应HTTP标头字段。

上传

nest内建使用express的multer这个中间件，提交文件的格式是multipart/form-data，使用的http方法是post.
Multer 无法处理非多部分格式（multipart/form-data）的数据
使用之前，先安装定义包：$ npm i -D @types/multer
官方参考：docs.nestjs.com/techniques/…

文件上传 nest有四种模式

文件上传虽然有多种模式，但是提交的文件要求是一个字段对一个文件，否则不能识别如下图：虽然file字段对应多个文件，上传后这个字段不能被识别

单个字段单一文件上传

例如form-data里面的 file字段上传了一个文件

    @Post('up')
    @HttpCode(HttpStatus.OK)
    @UseInterceptors(FileInterceptor('file'))
    public up(@UploadedFile() file: Express.Multer.File, @Body() body) {
        const r = new XCommonRet<number>();
        do {
            //
            delete file.buffer;
            log.info(JSON.stringify(file, null, 2));
            log.info(JSON.stringify(body, null, 2));
        } while (false);
        return r;
    }

单个字段多文件上传

例如form-data里面的，有多个file字段，每个字段对应一个文件
注意，这个时候装饰器FileInterceptor => FilesInterceptor， UploadedFile => UploadedFiles 都是复数的形式

   @Post('upmult')
    @HttpCode(HttpStatus.OK)
    @UseInterceptors(FilesInterceptor('file'))
    public upMult(@UploadedFiles() files: Express.Multer.File[], @Body() body) {
        const r = new XCommonRet<number>();
        do {
            let cnt = 0;
            for (const f of files) {
                delete f.buffer;
                cnt++;
                log.info(`[${cnt}]=${JSON.stringify(f)}`);
            }
            log.info(JSON.stringify(body, null, 2));
        } while (false);
        return r;
    }

多个字段，每个字段多文件上传

例如form-data里面的，有多个file字段和多个pic字段，每个字段对应一个文件
注意，这个时候，使用的装饰器又所不同 FilesInterceptor => FileFieldsInterceptor，UploadedFiles还是不变，不过配置类型变了 { file?: Express.Multer.File[]; pic?: Express.Multer.File[] }

    @Post('upmultex')
    @HttpCode(HttpStatus.OK)
    @UseInterceptors(FileFieldsInterceptor([{ name: 'file' }, { name: 'pic' }]))
    public upMultEx(@UploadedFiles() files: { file?: Express.Multer.File[]; pic?: Express.Multer.File[] }, @Body() body) {
        const r = new XCommonRet<number>();
        do {
            let cnt = 0;
            files?.file?.forEach((f) => {
                delete f.buffer;
                cnt++;
                log.info(`[${cnt}]=${JSON.stringify(f)}`);
            });
            files?.pic?.forEach((f) => {
                delete f.buffer;
                cnt++;
                log.info(`[${cnt}]=${JSON.stringify(f)}`);
            });
            log.info(JSON.stringify(body, null, 2));
        } while (false);
        return r;
    }

任意字段文件上传

顾名思义所有的上传的字段，是文件的，都能够取到
这个时候装饰器变成了AnyFilesInterceptor

   @Post('upany')
    @HttpCode(HttpStatus.OK)
    @UseInterceptors(AnyFilesInterceptor())
    public upAny(@UploadedFiles() files: Express.Multer.File[], @Body() body) {
        const r = new XCommonRet<number>();
        do {
            let cnt = 0;
            for (const f of files) {
                delete f.buffer;
                cnt++;
                log.info(`[${cnt}]=${JSON.stringify(f)}`);
            }
            log.info(JSON.stringify(body, null, 2));
        } while (false);
        return r;
    }

实现的代码

下面是实现的具体代码

    // 在当前工程目录下面，输入命令：nest g co upload
    // 我们就创建了一个src/upload/upload/controller.ts
    // 这里是文件的源码

import {
    Body,
    Controller,
    Post,
    Res,
    UploadedFile,
    UseInterceptors,
} from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';
import { XCommonRet } from 'xmcommon';
import { Response } from 'express';

@Controller('upload')
export class UploadController {
    @Post('up')
    @UseInterceptors(FileInterceptor('file'))
    public up(@UploadedFile() file: Express.Multer.File, @Body() body) {
        const r = new XCommonRet<number>();
        do {
            //
            console.log(file);
            console.log(body);
        } while (false);
        return r;
    }

    @Post('download')
    public download(@Res() res: Response) {
        const filePath =
            'c:\\temp\\测试.zip';
        res.download(filePath, (err) => {
            if (!err) {
                console.log('success', 'download', filePath);
                return;
            }

            console.error(err);
            res.send({ err: -1, msg: String(err) });
        });
    }

    @Post('view')
    public view(@Res() res: Response) {
        const filePath =
            'c:\\temp\\测试.jpg';
        res.sendFile(filePath, (err) => {
            if (!err) {
                console.log('success', 'view', filePath);
                return;
            }
            console.error(err);
            res.send({ err: -1, msg: String(err) });
        });
    }
}