nest 上传文件

时间：2023-01-16 浏览：174 分类：NestJS

为了处理文件上传，Nest 为 Express 提供了一个基于 multer 中间件包的内置模块。 Multer 处理以 multipart/form-data 格式发布的数据，该格式主要用于通过 HTTP POST 请求上传文件。该模块是完全可配置的，并可以根据应用程序要求调整其行为。注意：Multer 无法处理不支持的多部分格式（multipart/form-data）的数据。另此包与 FastifyAdapter 不兼容。

用法

第一步：安装类型提示包

$ npm i -D @types/multer

安装此包后，我们现在可以使用 Express.Multer.File 类型可以按如下方式导入此类型：import {Express} from 'express'

第二步：配置加载模块

// user.module.ts

import {MulterModule} from "@nestjs/platform-express";
import {diskStorage} from "multer";

@Module({
    imports: [MulterModule.register({
        storage: diskStorage({
            destination: './public/upload',    // 定义文件上传存储路径
            filename: (req, file, cb) => {     // 上传文件文件名保持一致，默认是随机数字的名
                cb(null, file.originalname);
            }
        }),
        limits:{
            fileSize: 1024 * 1024 * 10   // 上传文件大小限制
        }
    })],
    controllers: [UserController],
})
export class UserModule {}

Multer 的配置参数可以看这里

第三步：控制器加载

// user.controller.ts

import {UseInterceptors} from "@nestjs/common";
import {FileInterceptor} from "@nestjs/platform-express";

@Post('/upload')
@UseInterceptors(FileInterceptor('pics'))     // 这里是上传标识名称，必须保持前后一致
uploadFile(@UploadedFile() file: Express.Multer.File) {
  console.log(file);
}

当有文件上传成功时，即可显示file的数据

file {
  fieldname: 'pics',
  originalname: '2020-01-13-Introduction-of-JavaScript-Sync-Async-Example.png',
  encoding: '7bit',
  mimetype: 'image/png',
  destination: './public/upload',
  filename: '2020-01-13-Introduction-of-JavaScript-Sync-Async-Example.png',
  path: 'public/upload/2020-01-13-Introduction-of-JavaScript-Sync-Async-Example.png',
  size: 27052
}

第四步：前端上传

<input type="file" id="file" name="files">
<button type="button">Upload</button>

<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>

   document.querySelector('button').addEventListener('click', async function () {
      const file = document.querySelector('#file').files[0];
      const formData = new FormData();
      formData.append('file', file);     //这里的“pics”就是标识符，必须前后端一致
      axios.post('http://127.0.0.1:3000/user/upload', formData, {
         headers: {
            'Content-Type': 'multipart/form-data'
         }
      }).then(function (response) {
         console.log(response);
      }).catch(function (error) {
         console.log(error);
      });
   });
   
</script>