NestJs的文件上传

这里说下NestJs的两种上传文件方式

• 文件流的方式
• 文件方式

在写之前可以点击看看上传文档

安装插件

npm i multer @types/multer 

文件流的方式

需要自己创建文件夹，或者使用fs创建文件夹

1. 单文件上传
   
   改写一下，能够自动创建文件夹

• 创建文件夹的工具函数

// 动态新建文件夹的方法
const fs = require('fs'); // 导入 fs 模块
const path = require('path'); // 导入 path 模块

export const mkdirs:any = (pathname:string, callback) => {
  // 需要判断是否是绝对路径（避免不必要的 bug）
  pathname = path.isAbsolute(pathname) ? pathname : path.join(__dirname, pathname);
  // 获取相对路径
  pathname = path.relative(__dirname, pathname);

  // path.sep 避免平台差异带来的 bug
  const folders= pathname.split(path.sep);

  let pre = ''; // 最终用来拼合的路径
  folders.forEach(floder => {
    try {
      // 没有异常，文件已经创建，提示用户该文件已经创建
      const _stat = fs.statSync(path.join(__dirname, pre, floder));
      const hasMkdir = _stat && _stat.isDirectory();
      if (hasMkdir) {
        callback // && callback(`文件${floder}已经存在，不能重复创建，请重新创建！`)
      }
    } catch (err) {
      // 抛出异常，文件不存在则创建文件
      try {
        // 避免父文件还没有创建的时候，先创建子文件所出现的意外 bug，这里选择同步创建文件
        fs.mkdirSync(path.join(__dirname, pre, floder));
        callback && callback(null);
      } catch (error) {
        callback && callback(error);
      }
    }
    pre = path.join(pre, floder); // 路径拼合
  });
}

• 引入使用

2.多文件上传

• 如果field一样(用的name都是files)，我们可选择使用 UploadedFiles 的方法来处理，并且通过 for … of 来遍历
• 如果不一样，则提供了，如下的配置

// 多文件上传
  @Post('uploadAll')
  @UseInterceptors(
    FileFieldsInterceptor([
      { name: 'avatar', maxCount: 1 },
      { name: 'banner', maxCount: 1 },
    ]),
  )
  async uploadAll(
    @UploadedFiles()
    files: {
      avatar?: Express.Multer.File[];
      banner?: Express.Multer.File[];
    },
  ) {
    console.log(files);
    return '测试';
  }

运行测试

控制台就出现了上传的信息

后续就可以自行循环处理就行了

• 或者使用Any类型的拦截器AnyFilesInterceptor

// 多图上传2
  @Post('uploadAny')
  @UseInterceptors(AnyFilesInterceptor())
  async uploadAny(@UploadedFiles() files:Array<Express.Multer.File>){
    console.log(files)
    return '多图上传的测试';
  }

请求测试


同样看到控制台打印出来了数组，后续操作就自行循环处理就行了

文件方式上传

创建文件上传模块

nest g res upload

在upload.module.ts中引入相应的包

配置好后就可以使用了
在upload.controller.ts中使用

请求测试

在控制台就可以看到上传的信息

到这里就已经上传完成了，如果没有配置静态文件的访问的话，在网页上是无法访问的，所以需要自行配置静态文件的访问

这里我就贴出我的配置信息，至于自己的就需要自行修改

配置好后网页上测试

显示出来了，上传到这里就完成了
代码放置在仓库chapter7