会议室预订系统：用户管理模块-- 头像上传

上节我们实现了用户信息的修改：

但是头像是直接填的路径，这里应该做成图片的展示，以及图片的上传。

我们需要添加个上传图片的接口：

在 UserController 里添加这个 handler：

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

1
2
3
4
5
6
7
8

安装用到的类型包：

npm install @types/multer

在 postman 里测试下：

选择 form-data 类型，然后添加 file 字段，选择一个文件：

返回了服务端保存路径，并且打印了文件信息：

我们限制下只能上传图片：

import * as path from 'path';

@Post('upload')
@UseInterceptors(FileInterceptor('file', {
  dest: 'uploads',
  fileFilter(req, file, callback) {
    const extname = path.extname(file.originalname);        
    if(['.png', '.jpg', '.gif'].includes(extname)) {
      callback(null, true);
    } else {
      callback(new BadRequestException('只能上传图片'), false);
    }
  }
}))
uploadFile(@UploadedFile() file: Express.Multer.File) {
  console.log('file', file);
  return file.path;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

callback 的第一个参数是 error，第二个参数是是否接收文件。

然后我们上传一个非图片文件试一下：

返回了错误信息。

上传图片是正常的：

然后限制下图片大小，最大 3M:

limits: {
    fileSize: 1024 * 1024 * 3
}

1
2
3

当你上传超过 3M 的图片时，会提示错误：

然后我们改下保存的文件名，这需要自定义 storage。

前面讲 multer 文件上传那节讲过，直接拿过来（忘了的同学可以回头看一下）：

添加 src/my-file-storage.ts

import * as multer from "multer";
import * as fs from 'fs';

const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        try {
            fs.mkdirSync('uploads');
        }catch(e) {}

        cb(null, 'uploads')
    },
    filename: function (req, file, cb) {
        const uniqueSuffix = Date.now() + '-' + Math.round(Math.random() * 1E9) + '-' + file.originalname
        cb(null, uniqueSuffix)
    }
});

export { storage };

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

这个就是自己指定怎么存储，multer.distkStorage 是磁盘存储，通过 destination、filename 的参数分别指定保存的目录和文件名。

指定 storage：

然后测试下：

这样路径就能看出来是什么文件了。

我们把这个目录设置为静态文件目录，这样能直接访问上传的图片。

在 main.ts 里添加 uploads 目录为静态目录：

app.useStaticAssets('uploads', {
    prefix: '/uploads'
});

1
2
3

指定通过 /uploads 的前缀访问。

然后我们把路径复制，在浏览器访问下：

这样就可以访问到上传的文件了。

也就是说，上传头像之后，可以直接拿到图片的 url。

我们在页面里加一下：

在 src/page/update_info 下增加一个 HeadPicUpload.tsx

import { Button, Input } from "antd";

interface HeadPicUploadProps {
    value?: string;
    onChange?: Function
}

export function HeadPicUpload(props: HeadPicUploadProps) {
    return props?.value ? <div>
        {props.value}
        <Button>上传</Button>
    </div>: <div>
        <Button>上传</Button>
    </div>
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

在上传头像的地方引入下：

为什么是 value 和 onChange 两个参数呢？

因为 antd 的 Form.Item 在渲染时会给子组件传这两个参数。

现在渲染出来的是这样的：

我们在 postman 里上传个图片，比如这个：

拿到它的路径：

然后手动去数据库里改一下：

点击 apply。

刷新下页面，可以看到确实变了：

然后把它改成图片：

<img src={'http://localhost:3005/' + props.value} alt="头像" width="100" height="100"/>

头像就显示出来了：

然后我们把后面的上传按钮改为 antd 的拖拽上传组件：

import { InboxOutlined } from "@ant-design/icons";
import { Button, Input, message } from "antd";
import Dragger, { DraggerProps } from "antd/es/upload/Dragger";

interface HeadPicUploadProps {
    value?: string;
    onChange?: Function
}

const props: DraggerProps = {
    name: 'file',
    action: 'http://localhost:3005/user/upload',
    onChange(info) {
        const { status } = info.file;
        if (status === 'done') {
            console.log(info.file.response);    
            message.success(`${info.file.name} 文件上传成功`);
        } else if (status === 'error') {
            message.error(`${info.file.name} 文件上传失败`);
        }
    }
};

const dragger = <Dragger {...props}>
    <p className="ant-upload-drag-icon">
        <InboxOutlined />
    </p>
    <p className="ant-upload-text">点击或拖拽文件到这个区域来上传</p>
</Dragger>

export function HeadPicUpload(props: HeadPicUploadProps) {
    return props?.value ? <div>
        <img src={'http://localhost:3005/' + props.value} alt="头像" width="100" height="100"/>
        {dragger}
    </div>: <div>
        {dragger}
    </div>
}