摘要：
最近一直在做sass系统，整个系统是基于阿里的Ant Design Pro框架来搭建的，里面经常有用到上传文件的一个功能，在开发时发现上传的逻辑都没有基于业务进行统一的封装，导致项目中一搜上传的出现一大堆一些重复的代码(可能开发时大家都觉得费事，所以直接负责粘贴了，虽然我有时也会这样😁)，后面我就将一些常用的逻辑抽取出来，封装成一个通用的~
组件封装：
1、组件类型定义：
这部分主要就是定义这个上传组件需要的一些属性和值了，例如：上传的类型，文件列表、多选等，根据自己业务逻辑来就行了。
interface UploadTypes {
acceptType: string[]; // 上传的文件类型，
fileList: any[]; // 上传的文件列表
setFileList: any;
listType: "text" | "picture" | "picture-card"; // 上传卡片样式
disabled?: boolean | false; // 是否禁用上传
fileTag: number; // 上传文件类型标签
anjianId: string | number;
multiple?: boolean; // 是否允许文件多选，默认多选
}
const UploadCard: React.FC<UploadTypes> = ({ acceptType, fileList, setFileList, listType, disabled, anjianId = 0, fileTag = 4, multiple = true }) => {
return (
return (
<Upload listType={listType} {...props}
fileList={fileList}
onPreview={handlePreview}
name="fashen_fujian"
disabled={disabled}>
{listType == "picture-card" && (
<div>
<CloudUploadOutlined style={{ fontSize: 30, color: "gray" }} />
</div>
)}
{(listType == "picture" || listType == "text") &&
<Button icon={<UploadOutlined />}>上传本地文件</Button>}
</Upload>
);
)
}
2、文件类型检查和文件上传前检查：
文件类型检查：我这里列出了一些常见的文件上传类型，我这里默认允许pdf、jpg、jpeg、png类型文件的上传
// 常见的上传文件类型
const acceptTypeObj: AcceptType = {
".txt": "text/plain",
".html": "text/html",
".js": "text/javascript",
".css": "text/css",
".csv": "text/csv",
".json": "application/json",
".doc": "application/msword",
".docx": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
".ppt": "application/vnd.ms-powerpoint",
".pptx": "application/vnd.openxmlformats-officedocument.presentationml.presentation",
".xls": "application/vnd.ms-excel",
".xlsx": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
".xml": "application/xml",
".pdf": "application/pdf",
".jpg": "image/jpeg",
".jpeg": "image/jpeg",
".png": "image/png",
".gif": "image/gif",
".bmp": "image/bmp",
".tif": "image/tiff",
".tiff": "image/tiff",
".ico": "image/x-icon",
".svg": "image/svg+xml",
".mp3": "audio/mpeg",
".wav": "audio/wav",
".mp4": "video/mp4",
".avi": "video/x-msvideo",
".wmv": "video/x-ms-wmv",
".mov": "video/quicktime",
".flv": "video/x-flv",
".webm": "video/webm",
".mpeg": "video/mpeg",
".zip": "application/zip",
".rar": "application/x-rar-compressed",
".tar": "application/x-tar",
".gz": "application/gzip",
".7z": "application/x-7z-compressed",
};
// 文件上传
const props: UploadProps = {
name: "file",
accept: _.map([...acceptType, ".pdf", ".jpg", ".jpeg", ".png"], (ext) => acceptTypeObj[ext])
.filter(Boolean)
.join(","), // 文件上传类型限制
multiple: multiple,
beforeUpload: (file) => {
// 检查文件上传不能超过5g且文件不能重复
const boolean = BeforeUpload(file, fileList);
return boolean ? boolean : Upload.LIST_IGNORE;
},
};
beforeUpload方法: 上传文件前会执行这个方法，我们可以在这里对上传的文件做处理，我这里只限制了文件大小和不能重复；
/**
* 上传前判断大小，是否相同
*
* @param file 要上传的文件
* @param fileList 已上传的文件列表
* @returns 能否上传
*/
export const BeforeUpload = (file: RcFile, fileList: any[]) => {
const fileSizeInMB = file.size / 1024 / 1024; // 将文件大小转换为MB
const maxSizeInMB = 5120; // 最大允许上传的文件大小（5GB）
if (fileSizeInMB > maxSizeInMB) {
message.error(`文件大小不能超过 ${maxSizeInMB}MB`);
return false; // 返回 false 取消上传
}
const isFileExist = fileList.some(item =>
(
(item.name === file.name || item.name === file.name.slice(0, file.name.lastIndexOf('.'))) &&
item.size === file.size &&
item.type === file.type &&
item.lastModified === file.lastModified)
);
if (isFileExist) {
message.error('文件已存在，请选择其他文件');
return false; // 阻止上传
}
return true; // 返回 true 允许上传
}
3、自定义上传逻辑：
使用customRequest方法来覆盖antd默认的上传行为，因为我这里上传文件时上传到腾讯云oss，需要先拿到上传的一个token验证，验证成功后再进行文件上传(其他oss应该都是大体一致的),这里我们主要处理的就是上传的onChange方法，因为这里如果上传的是图片类型的文件是没什么问题，主要的是上传一些pdf、word、excel等文件类型的是没有对应的缩列图显示，我在这里就根据对应的文件类型替换成相对应的缩列图显示了(缩列图地址要自己找的)
直接看方法实现：
// 文件图片样式地址,这里要自己找哈
const imgUrls = {
".doc": "https://xxx/images/applet/ls/wenjian/doc.png",
".docx": "https://xxx/images/applet/ls/wenjian/docx.png",
".csv": "https://xxx/images/applet/ls/wenjian/csv.png",
".html": "https://xxx/images/applet/ls/wenjian/html.png",
".jpg": "https://xxx/images/applet/ls/wenjian/jpg.png",
".jpeg": "https://xxx/images/applet/ls/wenjian/jpg.png",
".mp4": "https://xxx/images/applet/ls/wenjian/mp4.png",
".pdf": "https://xxx/images/applet/ls/wenjian/pdf.png",
".png": "https://xxx/images/applet/ls/wenjian/png.png",
".ppt": "https://xxx/images/applet/ls/wenjian/ppt.png",
".pptx": "https://xxx/images/applet/ls/wenjian/pptx.png",
".txt": "https://xxx/images/applet/ls/wenjian/txt.png",
".xls": "https://xxx/images/applet/ls/wenjian/xlsx.png",
".xlsx": "https://xxx/images/applet/ls/wenjian/xlsx.png",
".zip": "https://xxx/images/applet/ls/wenjian/zip.png",
default: "https://xxx/images/applet/ls/wenjian/default.png",
};
// 文件类型匹配
const fileTypeMap = {
"text/plain": {
extType: ".txt",
url: imgUrls[".txt"],
},
"application/zip": {
extType: ".zip",
url: imgUrls[".zip"],
},
"application/pdf": {
extType: ".pdf",
url: imgUrls[".pdf"],
},
"application/msword": {
extType: ".doc",
url: imgUrls[".doc"],
},
"application/vnd.openxmlformats-officedocument.wordprocessingml.document": {
extType: ".docx",
url: imgUrls[".docx"],
},
"application/vnd.ms-powerpoint": {
extType: ".ppt",
url: imgUrls[".ppt"],
},
"application/vnd.openxmlformats-officedocument.presentationml.presentation": {
extType: ".pptx",
url: imgUrls[".pptx"],
},
"application/vnd.ms-excel": {
extType: ".xls",
url: imgUrls[".xls"],
},
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": {
extType: ".xlsx",
url: imgUrls[".xlsx"],
},
"image/jpeg": {
extType: ".jpeg",
url: imgUrls[".jpeg"],
},
"image/png": {
extType: ".png",
url: imgUrls[".png"],
},
"image/jpg": {
extType: ".jpg",
url: imgUrls[".jpg"],
},
default: {
extType: "",
url: "https://xxx/images/applet/ls/wenjian/default.png",
},
};
// 文件上传
const props: UploadProps = {
name: "file",
accept: _.map([...acceptType, ".pdf", ".jpg", ".jpeg", ".png"], (ext) => acceptTypeObj[ext])
.filter(Boolean)
.join(","),
multiple: multiple,
beforeUpload: (file) => {
// 检查文件上传不能超过5g且文件不能重复
const boolean = BeforeUpload(file, fileList);
return boolean ? boolean : Upload.LIST_IGNORE;
},
customRequest: async (option: any) => {
try {
// 后缀点的下标
const index = option.file.name.lastIndexOf(".");
//文件名称
const name = option.file.name.slice(0, index);
// 文件后缀类型 pdf,jpg,jpeg,....
const extension = option.file.name.slice(index + 1);
// 获取文件上传权限
const {
code,
message: msg,
data: obj,
} = await getUploadToken({
fileExt: extension,
fileName: name,
fileTag: fileTag,
anjianId: anjianId,
});
if (code != 20000) {
message.error(msg);
return option.onError ? option.onError(msg) : null;
}
// 上传oss
const uploadResult = await uploadCos(obj, option);
if (uploadResult.err) {
message.error(`上传文件失败，原因：${uploadResult.err}`);
return option.onError ? option.onError(uploadResult.err) : null;
} else {
return option.onSuccess
? option.onSuccess({
...uploadResult.data,
filePath: obj.filePath,
})
: null;
}
} catch (error) {
message.error("上传失败");
}
},
onChange: ({ fileList: changeFileList }) => {
// 文件处理，如果是pdf、word、excel等文件，用缩列图展示
try {
const uploadList = _.map(changeFileList, (item: any) => {
const fileInfo = fileTypeMap[item.type] || fileTypeMap.default;
const extType = fileInfo.extType || "";
let url = "";
if (_.startsWith(item.type, "image/")) {
url = item?.thumbUrl;
} else {
url = fileInfo.url;
}
// 上传错误的图像
if (item?.status == "error") {
url = errorImg;
}
return {
...item,
thumbUrl: url,
extType: extType,
};
});
setFileList(uploadList);
} catch (error) {
message.error("上传出错！");
}
},
};
4、自定义文件预览
我这里预览是打开了一个新窗口然后把地址放到一个ifram中去进行预览，把文件的url、name、type存储到sessionStorage(之前存储在localStorage，后面发现有个问题，每次预览不同的文件打开新的标签，只要一手动刷新窗口，标签里面拿到的是同一份文件，用sessionStorage就不会存在这个问题了)，这里还有个问题就是pdf文件是可以通过将文件转换成一个可预览的url放到ifram中显示的，但是word、xls文件就不行（可能是浏览器本身不支持这两种文件预览，因为我这里没有用插件，都是用浏览器ifram去显示，后面我直接提示用户上传后再预览，因为后端对地址做了处理，预览文件是调用腾讯文档提供的在线预览的api），哪位大佬有什么好的方法在前端实现word、xls在线预览（不是使用了插件）可以告诉一下哈
// 自定义预览
const handlePreview = (file: any) => {
// 判断上传完成的 status == done
if (file?.status == "done") {
// 图片的可以直接预览
if ([".jpg", ".png", ".jpeg"].includes(file?.extType)) {
const fileInfo = {
url: file?.thumbUrl,
fileName: file?.name,
fileType: file?.extType,
};
saveLocalInfo("fileInfo", fileInfo);
window.open("/preview", "_blank");
return;
}
// pdf 的可以转换成可以预览的url
if ([".pdf"].includes(file?.extType)) {
const fileURL = URL.createObjectURL(file?.originFileObj);
const fileInfo = {
url: fileURL,
fileName: file?.name,
fileType: file?.extType,
};
saveLocalInfo("fileInfo", fileInfo);
window.open("/preview", "_blank");
return;
}
// 文档类型的要上传后才能预览
if ([".doc", ".docx", ".xls", ".xls"].includes(file?.extType)) {
return message.warn("该文档需上传后才能进行预览");
}
return message.warn("当前文件不支持预览");
}
// 上传错误的文件
if (file?.status == "error") {
return message.error("预览失败");
}
return message.error("预览失败");
};
预览效果:
5、完整代码：
import { getUploadToken } from "@/services/auth/service";
import { saveLocalInfo } from "@/utils/tool";
import { BeforeUpload, uploadCos } from "@/utils/upload";
import { CloudUploadOutlined, UploadOutlined } from "@ant-design/icons";
import { Button, Upload, UploadProps, message } from "antd";
import _ from "lodash";
const errorImg =
"data:image/png;base64,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";
interface AcceptType {
[extension: string]: string;
}
// 常见的上传文件类型
const acceptTypeObj: AcceptType = {
".txt": "text/plain",
".html": "text/html",
".js": "text/javascript",
".css": "text/css",
".csv": "text/csv",
".json": "application/json",
".doc": "application/msword",
".docx": "application/vnd.openxmlformats-officedocument.wordprocessingml.document",
".ppt": "application/vnd.ms-powerpoint",
".pptx": "application/vnd.openxmlformats-officedocument.presentationml.presentation",
".xls": "application/vnd.ms-excel",
".xlsx": "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
".xml": "application/xml",
".pdf": "application/pdf",
".jpg": "image/jpeg",
".jpeg": "image/jpeg",
".png": "image/png",
".gif": "image/gif",
".bmp": "image/bmp",
".tif": "image/tiff",
".tiff": "image/tiff",
".ico": "image/x-icon",
".svg": "image/svg+xml",
".mp3": "audio/mpeg",
".wav": "audio/wav",
".mp4": "video/mp4",
".avi": "video/x-msvideo",
".wmv": "video/x-ms-wmv",
".mov": "video/quicktime",
".flv": "video/x-flv",
".webm": "video/webm",
".mpeg": "video/mpeg",
".zip": "application/zip",
".rar": "application/x-rar-compressed",
".tar": "application/x-tar",
".gz": "application/gzip",
".7z": "application/x-7z-compressed",
};
// 文件图片样式地址,这里要自己找哈
const imgUrls = {
".doc": "https://xxx/images/applet/ls/wenjian/doc.png",
".docx": "https://xxx/images/applet/ls/wenjian/docx.png",
".csv": "https://xxx/images/applet/ls/wenjian/csv.png",
".html": "https://xxx/images/applet/ls/wenjian/html.png",
".jpg": "https://xxx/images/applet/ls/wenjian/jpg.png",
".jpeg": "https://xxx/images/applet/ls/wenjian/jpg.png",
".mp4": "https://xxx/images/applet/ls/wenjian/mp4.png",
".pdf": "https://xxx/images/applet/ls/wenjian/pdf.png",
".png": "https://xxx/images/applet/ls/wenjian/png.png",
".ppt": "https://xxx/images/applet/ls/wenjian/ppt.png",
".pptx": "https://xxx/images/applet/ls/wenjian/pptx.png",
".txt": "https://xxx/images/applet/ls/wenjian/txt.png",
".xls": "https://xxx/images/applet/ls/wenjian/xlsx.png",
".xlsx": "https://xxx/images/applet/ls/wenjian/xlsx.png",
".zip": "https://xxx/images/applet/ls/wenjian/zip.png",
default: "https://xxx/images/applet/ls/wenjian/default.png",
};
// 文件类型匹配
const fileTypeMap = {
"text/plain": {
extType: ".txt",
url: imgUrls[".txt"],
},
"application/zip": {
extType: ".zip",
url: imgUrls[".zip"],
},
"application/pdf": {
extType: ".pdf",
url: imgUrls[".pdf"],
},
"application/msword": {
extType: ".doc",
url: imgUrls[".doc"],
},
"application/vnd.openxmlformats-officedocument.wordprocessingml.document": {
extType: ".docx",
url: imgUrls[".docx"],
},
"application/vnd.ms-powerpoint": {
extType: ".ppt",
url: imgUrls[".ppt"],
},
"application/vnd.openxmlformats-officedocument.presentationml.presentation": {
extType: ".pptx",
url: imgUrls[".pptx"],
},
"application/vnd.ms-excel": {
extType: ".xls",
url: imgUrls[".xls"],
},
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": {
extType: ".xlsx",
url: imgUrls[".xlsx"],
},
"image/jpeg": {
extType: ".jpeg",
url: imgUrls[".jpeg"],
},
"image/png": {
extType: ".png",
url: imgUrls[".png"],
},
"image/jpg": {
extType: ".jpg",
url: imgUrls[".jpg"],
},
default: {
extType: "",
url: "https://static.zhongbaisubao.com/images/applet/ls/wenjian/default.png",
},
};
interface UploadTypes {
acceptType: string[]; // 上传的文件类型，
fileList: any[]; // 上传的文件列表
setFileList: any;
listType: "text" | "picture" | "picture-card"; // 上传卡片样式
disabled?: boolean | false; // 是否禁用上传
fileTag: number; // 上传文件类型标签
anjianId: string | number;
multiple?: boolean; // 是否允许文件多选，默认多选
}
const UploadCard: React.FC<UploadTypes> = ({ acceptType, fileList, setFileList, listType, disabled, anjianId = 0, fileTag = 4, multiple = true }) => {
// 文件上传
const props: UploadProps = {
name: "file",
accept: _.map([...acceptType, ".pdf", ".jpg", ".jpeg", ".png"], (ext) => acceptTypeObj[ext])
.filter(Boolean)
.join(","),
multiple: multiple,
beforeUpload: (file) => {
// 检查文件上传不能超过5g且文件不能重复
const boolean = BeforeUpload(file, fileList);
return boolean ? boolean : Upload.LIST_IGNORE;
},
customRequest: async (option: any) => {
try {
// 后缀点的下标
const index = option.file.name.lastIndexOf(".");
//文件名称
const name = option.file.name.slice(0, index);
// 文件后缀类型 pdf,jpg,jpeg,....
const extension = option.file.name.slice(index + 1);
// 获取文件上传权限
const {
code,
message: msg,
data: obj,
} = await getUploadToken({
fileExt: extension,
fileName: name,
fileTag: fileTag,
anjianId: anjianId,
});
if (code != 20000) {
message.error(msg);
return option.onError ? option.onError(msg) : null;
}
// 上传oss
const uploadResult = await uploadCos(obj, option);
console.log(uploadResult,'uploadResult....')
if (uploadResult.err) {
message.error(`上传文件失败，原因：${uploadResult.err}`);
return option.onError ? option.onError(uploadResult.err) : null;
} else {
return option.onSuccess
? option.onSuccess({
...uploadResult.data,
filePath: obj.filePath,
})
: null;
}
} catch (error) {
message.error("上传失败");
}
},
onChange: ({ fileList: changeFileList }) => {
// 文件处理，如果是pdf、word、excel等文件，用缩列图展示
try {
const uploadList = _.map(changeFileList, (item: any) => {
const fileInfo = fileTypeMap[item.type] || fileTypeMap.default;
const extType = fileInfo.extType || "";
let url = "";
if (_.startsWith(item.type, "image/")) {
url = item?.thumbUrl;
} else {
url = fileInfo.url;
}
// 上传错误的图像
if (item?.status == "error") {
url = errorImg;
}
return {
...item,
thumbUrl: url,
extType: extType,
};
});
setFileList(uploadList);
} catch (error) {
message.error("上传出错！");
}
},
};
// 自定义预览
const handlePreview = (file: any) => {
// 判断上传完成的 status == done
if (file?.status == "done") {
// 图片的可以直接预览
if ([".jpg", ".png", ".jpeg"].includes(file?.extType)) {
const fileInfo = {
url: file?.thumbUrl,
fileName: file?.name,
fileType: file?.extType,
};
saveLocalInfo("fileInfo", fileInfo);
window.open("/preview", "_blank");
return;
}
// pdf 的可以转换成可以预览的url
if ([".pdf"].includes(file?.extType)) {
const fileURL = URL.createObjectURL(file?.originFileObj);
const fileInfo = {
url: fileURL,
fileName: file?.name,
fileType: file?.extType,
};
saveLocalInfo("fileInfo", fileInfo);
window.open("/preview", "_blank");
return;
}
// 文档类型的要上传后才能预览
if ([".doc", ".docx", ".xls", ".xls"].includes(file?.extType)) {
return message.warn("该文档需上传后才能进行预览");
}
return message.warn("当前文件不支持预览");
}
// 上传错误的文件
if (file?.status == "error") {
return message.error("预览失败");
}
return message.error("预览失败");
};
return (
<Upload listType={listType} {...props} fileList={fileList} onPreview={handlePreview} name="fashen_fujian" disabled={disabled}>
{listType == "picture-card" && (
<div>
<CloudUploadOutlined style={{ fontSize: 30, color: "gray" }} />
</div>
)}
{(listType == "picture" || listType == "text") && <Button icon={<UploadOutlined />}>上传本地文件</Button>}
</Upload>
);
};
export default UploadCard;
最后：
希望对大家有所帮助哈， 我觉得还是要勤做笔记，像我觉得之前明明做过类似的功能，再使用时又忘记怎么做了😭，笔记没做，还是得百度，最后还是白白浪费了时间。。
