Nestjs 图片上传(一)

1、安装依赖

npm install multer
npm install @types/multer --save-dev

2、生成upload模块

nest g res upload

3、配置图片名称及图片存放路径

upload.module.ts

import { Module } from '@nestjs/common';
import { UploadService } from './upload.service';
import { UploadController } from './upload.controller';
import { MulterModule } from '@nestjs/platform-express';
import { diskStorage } from 'multer';
import { join, extname } from 'path';

@Module({
    imports:[
        MulterModule.register({
            storage: diskStorage({
                // 图片存放路径
                destination: join(__dirname, "../images"),
                // 图片文件名
                filename: (_, file, callback) => {
                    const fileName = `${new Date().getTime() + extname(file.originalname)}`;
                    return callback(null, fileName);
                }
            })
        })
    ],
    controllers: [UploadController],
    providers: [UploadService]
})
export class UploadModule { }

4、上传逻辑实现

upload.controller.ts

import { Controller, Get, Post, Body, Patch, Param, Delete, UseInterceptors, UploadedFile } from '@nestjs/common';
import { UploadService } from './upload.service';
import { CreateUploadDto } from './dto/create-upload.dto';
import { UpdateUploadDto } from './dto/update-upload.dto';
import { FileInterceptor } from '@nestjs/platform-express';

@Controller('upload')
export class UploadController {
    constructor(private readonly uploadService: UploadService) { }
    
    @Post()
    @UseInterceptors(FileInterceptor('file')) // 'file'为前端表单字段名称
    async uploadFile(@UploadedFile() file) {
        console.log('file', file);
        console.log(`${file.originalname} uploaded successfully.`);
        return `Successfully uploaded ${file.originalname}`;
    }
}

5、配置访问路径

main.ts

import { VersioningType } from '@nestjs/common';
import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';
import * as session from 'express-session';
import { NestExpressApplication } from '@nestjs/platform-express/interfaces';
import { join } from 'path';

async function bootstrap() {
    const app = await NestFactory.create<NestExpressApplication>(AppModule);
    app.useStaticAssets(join(__dirname, 'images'),{
        prefix: "/img"
    });
    await app.listen(3000);
}
bootstrap();

6、apifox 上传图片

7、上传成功之后访问图片

 7-1、上传文件存放位置

7-2、访问上传文件
 
  • 8
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
你可以使用 `multer` 库来上多张图片。以下是在 NestJS 中使用 `multer` 实现多张图片的示例代码: 1. 安装 `multer` 库: ``` npm install --save multer ``` 2. 在控制器中导入 `multer` 库: ``` import { Controller, Post, UploadedFiles, UseInterceptors } from '@nestjs/common'; import { FilesInterceptor } from '@nestjs/platform-express'; import { diskStorage } from 'multer'; import { editFileName } from './utils/file-upload.utils'; ``` 3. 创建一个上文件的中间件: ``` export const multerOptions = { storage: diskStorage({ destination: './uploads', filename: editFileName, }), }; ``` 4. 创建一个上文件的工具类: ``` export const editFileName = (req, file, callback) => { const name = file.originalname.split('.')[0]; const fileExtName = extname(file.originalname); const randomName = Array(4) .fill(null) .map(() => Math.round(Math.random() * 16).toString(16)) .join(''); callback(null, `${name}-${randomName}${fileExtName}`); }; ``` 5. 在控制器中使用 `@UseInterceptors()` 装饰器来启用 `FilesInterceptor` 中间件: ``` @Controller('upload') export class UploadController { @Post() @UseInterceptors(FilesInterceptor('files', 20, multerOptions)) async uploadMultipleFiles(@UploadedFiles() files) { console.log(files); const response = []; files.forEach((file) => { const fileReponse = { originalname: file.originalname, filename: file.filename, }; response.push(fileReponse); }); return response; } } ``` 6. 在路由中注册控制器: ``` import { Module } from '@nestjs/common'; import { UploadController } from './upload.controller'; @Module({ controllers: [UploadController], }) export class UploadModule {} ``` 这样,你就可以通过 POST 请求上多张文件。在这个示例中,上的文件将被保存在 `./uploads` 目录下。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值