feat(admin): 附件上传改为拖拽并增加大小/格式提示

This commit is contained in:
2026-08-10 17:29:48 +08:00
parent 7df28f46e0
commit 6f421c7bd6

View File

@@ -1,7 +1,7 @@
import React, { useRef, useState } from 'react';
import { App, Button, Modal, Popconfirm, Space, Table, Upload } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { EyeOutlined, InboxOutlined, UploadOutlined } from '@ant-design/icons';
import { EyeOutlined, InboxOutlined } from '@ant-design/icons';
import api from '../../api';
import { message } from '../../ui/app-message';
import { useApiMutation } from '../../hooks/useApiMutation';
@@ -145,8 +145,16 @@ export const AttachmentsTab: React.FC<TabProps & { data: AttachmentRecord[] }> =
return (
<div>
{hasPermission('student:edit') ? (
<Upload
<Upload.Dragger
showUploadList={false}
multiple={false}
beforeUpload={(file) => {
if (file.size > 2 * 1024 * 1024) {
message.error('文件大小不能超过 2MB');
return Upload.LIST_IGNORE;
}
return true;
}}
customRequest={async (options) => {
const formData = new FormData();
formData.append(
@@ -166,11 +174,14 @@ export const AttachmentsTab: React.FC<TabProps & { data: AttachmentRecord[] }> =
setUploading(false);
}
}}
style={{ marginBottom: 16 }}
>
<Button icon={<UploadOutlined />} loading={uploading}>
</Button>
</Upload>
<p className="ant-upload-drag-icon">
<InboxOutlined />
</p>
<p className="ant-upload-text">{uploading ? '上传中…' : '点击或拖拽文件到此区域上传'}</p>
<p className="ant-upload-hint"> / PDF / Word / Excel 2MB</p>
</Upload.Dragger>
) : null}
<Table<AttachmentRecord> scroll={{ x: 'max-content' }}
columns={columns}