index.tsx
3.56 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
/*
* @Date: 2021-01-05 14:24:23
* @LastEditors: wangqiang@feewee.cn
* @LastEditTime: 2021-03-11 12:55:38
*/
import React from "react";
import { message, Upload } from "antd";
import { UploadProps } from "antd/lib/upload";
import { RcFile, UploadFile } from "antd/lib/upload/interface";
import getFidFile from "@/utils/getFidFile";
interface Props extends UploadProps {
isFid?: boolean; // 预览文件 路径是否为 fid 形式
limitSize?: number; // 限制文件大小,单位MB
limitUnit?: "kb" | "mb" | "KB" | "MB"; // 限制大小单位, 默认MB
children?: React.ReactNode;
}
/**
* @description: 自定义封装的Upload上传组件
* @description: 目前主要有2个功能:
* 1. 预览文件,通过isFid属性判断是否是fid链接,然后通过新生成的a标签,跳转新页面打开文件。
* 2. 限制上传文件大小,通过传入limitSize和limitUnit属性,判断传入文件的大小是否符合条件。
* 2.1. 这里有一点需要这里,
* 为了解决在表单中使用,当超过限制后,原有filelist中的文件都被清空,
* 需要在Form.Item 传入的getValueFromEvent回调函数中多添加2行判断函数:
*if (e.file.status === 'size_limit') {
return e.fileList.filter((file: any) => file.uid !== e.file.uid);
}
* @param {Props} props
*/
export default function FeeweeUpload({
isFid = false,
limitSize = undefined,
limitUnit = "MB",
children,
...props
}: Props) {
const onPreview = (file: UploadFile) => {
if (props.onPreview) {
props.onPreview(file);
return;
}
getFidFile(file.response.data, isFid);
};
const beforeUpload = (file: RcFile, filelist: RcFile[]) => {
if (limitSize !== undefined && typeof limitSize === "number") {
const limit = isExceededSize(file, limitSize, limitUnit);
if (limit.success) {
return true;
} else {
message.error(limit.msg);
/**
* 将文件状态status设置为 size_limit,
* 当表单中使用时,可以在getValueFromEvent回调函数中多添加2行判断函数:
* if (e.file.status === 'size_limit') {
* return e.fileList.filter((file: any) => file.uid !== e.file.uid);
* }
*/
// @ts-ignore
file.status = "size_limit";
return false;
}
}
return props.beforeUpload ? props.beforeUpload(file, filelist) : true;
};
return (
<>
<Upload {...props} beforeUpload={beforeUpload} onPreview={onPreview}>
{children}
</Upload>
</>
);
}
/**
* @description: 计算限制大小,统一返回限制大小转换为KB
* @param {number} limitSize
* @param {'kb' | 'mb' | 'KB' | 'MB'} limitUnit
* @return {number}
*/
function getLimitSize(
limitSize: number,
limitUnit: "kb" | "mb" | "KB" | "MB"
): number {
if (limitUnit === "kb" || limitUnit === "KB") {
return limitSize;
}
if (limitUnit === "mb" || limitUnit === "MB") {
return limitSize * 1024;
}
return 0;
}
/**
* @description: 判断是否没超过限制大小
* @param {RcFile} file
* @param {number} limitSize
* @param {*} limitUnit
* @return {{ success: boolean, msg?: string }}
*/
function isExceededSize(
file: RcFile,
limitSize: number,
limitUnit: "kb" | "mb" | "KB" | "MB"
): { success: boolean; msg?: string } {
const _limitSize = getLimitSize(limitSize, limitUnit);
const fileSizeToKB = file.size / 1024;
if (fileSizeToKB <= _limitSize) {
return { success: true };
} else {
return {
success: false,
msg: `文件【${file.name}】大小不能超过${limitSize}${limitUnit}`,
};
}
}