antd pro mysql_antd pro table中的文件上传

概述

项目中经常会遇到在表格中展示图片的需求(比如展示用户信息时, 有一列是用户的头像).

antd pro table 的功能很强大, 对于常规的信息展示只需参照示例配置 column 就可以了. 但是对于文件(比如图片) 在表格中的展示, 介绍并不多.

下面通过示例来演示 antd pro table 中图片的上传和展示.

示例代码

前端主要包含如下 2 部分:

列表页面: 通过 antd pro table 显示数据信息

表单页面: 新建/修改数据的页面, 上传图片的功能就在其中

一个模块主要包含如下几个文件:

teacher.jsx: 显示数据列表信息

teacher-form.jsx: 用于添加/修改数据

model.js: list.jsx 和 form.jsx 之间共享数据

service.js: 访问后端的 API

下面的例子是实际项目中的一个简单的模块, 完成教师信息的 CURD, 教师的头像是图片文件

列表页面

1 import React, { useState, useRef } from 'react';

2 import { connect } from 'umi';

3 import { PageHeaderWrapper } from '@ant-design/pro-layout';

4 import { Button, Card, Modal, Space, Popconfirm, Form, message } from 'antd';

5 import { PlusOutlined, DeleteOutlined, EditOutlined } from '@ant-design/icons';

6 import ProTable from '@ant-design/pro-table';

7 import { queryAllTeacher, addTeacher, updateTeacher, deleteTeacher } from './service';

8 import { getDictDataByCatagory, getDownloadUrl } from '@/utils/common';

9 import TeacherForm from './teacher-form';

10

11 const Teacher = (props) => {

12 const { dicts, form, avatarFid } = props;

13 const [createModalVisible, handleModalVisible] = useState(false);

14

15 // preview state

16 const [previewVisible, handlePreviewVisible] = useState(false);

17 const [previewImageUrl, handlePreviewImageUrl] = useState('');

18

19 const [record, handleRecord] = useState(null);

20 const tableRef = useRef();

21

22 const previewAvatar = (record) => {

23 handlePreviewVisible(true);

24 if (record.avatar) handlePreviewImageUrl(getDownloadUrl(record.avatar));

25 else handlePreviewImageUrl('/nopic.jpg');

26 };

27

28 const teacherColumns = [

29 {

30 title: '头像图片',

31 dataIndex: 'avatar',

32 hideInSearch: true,

33 render: (_, record) => (

34 previewAvatar(record)}>

35 {record.avatar ? (

36

37 ) : (

38

39 )}

40

41 ),

42 },

43 {

44 title: '姓名',

45 dataIndex: 'login_name',

46 },

47 {

48 title: '性别',

49 dataIndex: 'sex',

50 hideInSearch: true,

51 },

52 {

53 title: '手机号',

54 dataIndex: 'mobile',

55 },

56 {

57 title: '身份证号码',

58 dataIndex: 'identity_card',

59 hideInSearch: true,

60 },

61 {

62 title: '个人简介',

63 dataIndex: 'comment',

64 ellipsis: true,

65 width: 300,

66 hideInSearch: true,

67 },

68 {

69 title: '来源类型',

70 dataIndex: 'teacher_source',

71 hideInSearch: true,

72 valueEnum: getDictDataByCatagory(dicts, 'teacher_source'),

73 },

74 {

75 title: '操作',

76 dataIndex: 'option',

77 valueType: 'option',

78 render: (_, record) => (

79

80

81 type="primary"

82 size="small"

83 onClick={() => {

84 handleRecord(record);

85 // 设置avatar数据

86 let avatarUrl = '/nopic.jpg';

87

88 if (record.avatar) avatarUrl =