nestjs 全栈进阶--文件上传

你的微笑暖暖的

于 2024-08-08 14:52:31 发布

阅读量229

点赞数 2

文章标签： nest nestjs 全栈后端

本文链接：https://blog.csdn.net/wangyuiba1314/article/details/141027004

版权

nest new upload -p pnpm

pnpm i multer
pnpm i -D @types/multer

允许跨域

1. 单文件上传

我们去新增一个用于上传的handler

@Post('upload')
@UseInterceptors(FileInterceptor('file', {
    dest: 'uploads'
}))
uploadFile(@UploadedFile() file: Express.Multer.File, @Body() body) {
    console.log('body', body);
    console.log('file', file);
}

使用 FileInterceptor 来获取前端给的 file 字段，然后通过 UploadedFile 装饰器把它作为参数注入，dest是指定图片的存放目录的，当我们执行pnpm run start:dev时，你会发现它给我们自动的创建了一个uploads的文件夹

现在我们去快速写个前端页面，用于上传

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://unpkg.com/axios@1.6.8/dist/axios.min.js"></script>
  </head>
  <body>
    <input id="fileInput" type="file" />
    <script>
      const fileInput = document.querySelector('#fileInput');

      async function formData() {
        const data = new FormData();
        // body字段
        data.set('name','xt');
        data.set('age', 18);
        // 对应后端提取的file字段
        data.set('file', fileInput.files[0]);

        const res = await axios.post('http://localhost:3000/upload', data);
        console.log(res);
      }

      fileInput.onchange = formData;
    </script>
  </body>
</html>

鼠标右键选择这个，在默认浏览器打开，注意：这个功能需要安装vscode插件--》

然后选择文件，上传就好

可以看到，打印了 file 对象，并且文件也保存到了 uploads 目录

2. 多文件上传

我们新写个handler

@Post('uploads')
@UseInterceptors(FilesInterceptor('files', 3,  {
    dest: 'uploads'
}))
uploadFiles(@UploadedFiles() files: Array<Express.Multer.File>, @Body() body) {
    console.log('body', body);
    console.log('file', files);
}

单文件用的是：FileInterceptor，多文件用的是FilesInterceptor，多了一个s

单文件用的是：UploadedFile，多文件用的是UploadedFiles，也多了一个s

这个3，表示最大数量

然后我们改一下前端代码

<input id="fileInput" type="file" multiple />

async function formData() {
    const data = new FormData();
    data.set('name','xt');
    data.set('age', 18);
    [...fileInput.files].forEach(item => {
        data.append('files', item)
    })

    const res = await axios.post('http://localhost:3000/uploads', data);
}

然后我们选择两个文件在上传

3. AnyFilesInterceptor

上面我们不管是单文件，还是多文件，我们都指定获取了一个file字段，那万一我们不知道这个字段是什么呢？这个时候我们就可以使用AnyFilesInterceptor

前端我们修改下请求路径，我们再去试试上传

4. 全局设置路径及处理文件名

刚刚我们都是在路由上指定文件存储位置的，现在我们来试试全局指定

我们再去写个handler试试，

我们在修改下前端的请求路径

我们在上传个文件

5. 预览上传的图片

不知大家还记不记得我们之前讲过的useStaticAssets，它让 nest 服务支持静态文件的访问。

useStaticAssets prefix 是虚拟前缀

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import {NestExpressApplication} from '@nestjs/platform-express'
import { join } from 'path';

async function bootstrap() {
  const app = await NestFactory.create<NestExpressApplication>(AppModule);

  app.enableCors()

  app.useStaticAssets(join(__dirname, '../new-uploads'), {
    prefix: '/xt'
  });

  await app.listen(3000);
}
bootstrap();