6.封装上传图片方法，按日期存储图片

一、重要知识 & 坑

1. mkdir 创建文件夹的插件

1. 安装npm i mkdirp --save

2. 引入 import * as mkdirp from 'mkdirp';

   @filename(tools.service)
   import * as mkdirp from 'mkdirp';
   
   mkdirp(dir);
   

2.前端页面需要加enctype否则上传失败

3.注意配图片的路径

二、封装上传文件方法 & 使用流程

在public里新建upload => 创建focus的控制器 => 在toolservice中封装上传方法

1. controller-使用

import { Controller, Get, Render, Post, Body, UseInterceptors, UploadedFile } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';
import { Config } from '../../../config/config';
import { ToolsService } from '../../../service/tools/tools.service';
@Controller(`${Config.adminPath}/focus`)
export class FocusController {
    constructor(
        private toolsService: ToolsService
    ){}

    @Get()
    index() {
        return '图片列表';
    }

    @Get('add')
    @Render('admin/focus/add')
    add() {
        return {};
    }

    @Post('doAdd')
    @UseInterceptors(FileInterceptor('focus_img'))
    doAdd(@Body() body, @UploadedFile() file) {
        let saveDir = this.toolsService.uploadFile(file);
        return '上传成功'
    }
}

2. service - 封装上传文件的方法

// 重点的逻辑

import { format } from 'silly-datetime'; // 格式化日期
import { join, extname } from 'path'; // 上传图片时需要
import { Config } from '../../config/config';
import * as mkdirp from 'mkdirp'; // 创建文件夹
import { createWriteStream } from 'fs'

@Injectable()
export class ToolsService {
    uploadFile(file) {
        /*
            1.获取当前日期
            2.根据日期创建目录 20210410
            3.实现上传
            4.返回图片保存的地址
        */
        // 1.获取当前日期
        let day = format(new Date(), 'YYYYMMDD'); //目录名称
        let d = this.getTime(); // 时间戳，当前图片的名称

        // 2.创建保存文件的目录（按日期划分）
        let dir = join(__dirname, `../../../public/${Config.uploadDir}`, day); // 保存图片的路径
        mkdirp.sync(dir); // 创建文件夹; (别忘了sync变成同步否则会报错，因为还没有创建日期文件夹)
        
        // 3.实现上传
        let uploadDir = join(dir, d+extname(file.originalname));
        const writeImage = createWriteStream(uploadDir);
        writeImage.write(file.buffer);

        // 4.返回图片保存的地址
        let saveDir = join(Config.uploadDir, day, d+extname(file.originalname));
        console.log('返回图片保存的地址: ', saveDir); // upload/20210410/1618041629839.png
        return saveDir;
    }
}

完整的service

import { Controller, Get, Render, Post, Body, UseInterceptors, UploadedFile } from '@nestjs/common';
import { FileInterceptor } from '@nestjs/platform-express';
import { Config } from '../../../config/config';
import { ToolsService } from '../../../service/tools/tools.service';
@Controller(`${Config.adminPath}/focus`)
export class FocusController {
    constructor(
        private toolsService: ToolsService
    ){}

    @Get()
    index() {
        return '图片列表';
    }

    @Get('add')
    @Render('admin/focus/add')
    add() {
        return {};
    }

    @Post('doAdd')
    @UseInterceptors(FileInterceptor('focus_img'))
    doAdd(@Body() body, @UploadedFile() file) {
        console.log('body: ', body);
        console.log('file: ', file);
        let saveDir = this.toolsService.uploadFile(file);
        console.log('saveDir: ', saveDir);
        return '上传成功'
    }
}

3. Config 全局配置存放图片的文件夹名称

export class Config{
    static adminPath = 'admin';
    static uploadDir='upload'
}

4. 前端页面使用

@filename(add.ejs)

<%- include ('../public/page_header.ejs')%>
<div class="container-fluid">
    <div class="row">
        <div class="panel panel-default">              
            <div class="panel-heading">增加轮播图</div>
            <div class="panel-body">
                <div class="table-responsive input-form">
                    <form action="/<%=config.adminPath%>/focus/doAdd" method="post" enctype="multipart/form-data">
                        <ul>
                            <li>  分　　类: 
                                <select name="type" id="type">
                                    <option value="1">网站</option>
                                    <option value="2">APP</option>
                                    <option value="3">小程序</option>
                                </select>
                            </li>
                            <li>  名　　称: <input type="text" name="title"/></li>
                            <li>  跳转地址: <input type="text" name="link"/></li>
                            <li>  轮 播 图: <input type="file" name="focus_img"/></li>
                            <li>  排　　序: <input type="text" name="sort" value="1000"/></li>
                            <li>  状　　态: 
                                <input type="radio" name="status" checked value="1" id="a"/><label for="a">显示</label>    
                                <input type="radio" name="status" value="0" id="b"/><label for="b">隐藏</label> 　
                            </li>
                            <li>
                                <button type="submit" class="btn btn-primary">提交</button>
                            </li>
                        </ul>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>