From 90d23dc8fa248f7c054357c912497b2ea374f3e0 Mon Sep 17 00:00:00 2001 From: unknown <18119604035@163.com> Date: Fri, 28 Jul 2023 17:09:33 +0800 Subject: [PATCH] =?UTF-8?q?=E8=B5=84=E6=BA=90=E8=AF=BE=E4=BB=B6=E4=B8=8A?= =?UTF-8?q?=E4=BC=A0=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/compenents/index.ts | 3 +- .../upload-courseware-button/index.tsx | 237 ++++++++++++++++++ src/pages/resource/courseware/index.tsx | 16 +- 3 files changed, 253 insertions(+), 3 deletions(-) create mode 100644 src/compenents/upload-courseware-button/index.tsx diff --git a/src/compenents/index.ts b/src/compenents/index.ts index fd57bbe..8143d58 100644 --- a/src/compenents/index.ts +++ b/src/compenents/index.ts @@ -9,4 +9,5 @@ export * from "./tree-category"; export * from ".//tree-adminroles"; export * from "./duration-text"; export * from "./upload-video-sub"; -export * from "./select-resource"; \ No newline at end of file +export * from "./select-resource"; +export * from "./upload-courseware-button"; diff --git a/src/compenents/upload-courseware-button/index.tsx b/src/compenents/upload-courseware-button/index.tsx new file mode 100644 index 0000000..b8d393b --- /dev/null +++ b/src/compenents/upload-courseware-button/index.tsx @@ -0,0 +1,237 @@ +import { InboxOutlined } from "@ant-design/icons"; +import { + Button, + Col, + message, + Modal, + Progress, + Row, + Table, + Tag, + Upload, +} from "antd"; +import Dragger from "antd/es/upload/Dragger"; +import { useEffect, useRef, useState } from "react"; +import { generateUUID, parseVideo } from "../../utils"; +import { minioMergeVideo, minioUploadId } from "../../api/upload"; +import { UploadChunk } from "../../js/minio-upload-chunk"; + +interface PropsInterface { + categoryIds: number[]; + onUpdate: () => void; +} + +export const UploadCoursewareButton = (props: PropsInterface) => { + const [showModal, setShowModal] = useState(false); + const localFileList = useRef([]); + const intervalId = useRef(); + const [fileList, setFileList] = useState([]); + + const getMinioUploadId = async (extension: string) => { + let resp: any = await minioUploadId(extension); + return resp.data; + }; + + useEffect(() => { + if (showModal) { + intervalId.current = setInterval(() => { + if (localFileList.current.length === 0) { + return; + } + for (let i = 0; i < localFileList.current.length; i++) { + if (localFileList.current[i].upload.status === 0) { + localFileList.current[i].upload.handler.start(); + break; + } + if (localFileList.current[i].upload.status === 3) { + break; + } + } + }, 1000); + console.log("定时器已创建", intervalId.current); + } else { + window.clearInterval(intervalId.current); + console.log("定时器已销毁"); + } + }, [showModal]); + + const uploadProps = { + multiple: true, + beforeUpload: async (file: File) => { + let extension: any = file.name.split("."); + extension = extension[extension.length - 1]; + console.log(extension); + console.log(file.type); + if ( + file.type === + "application/vnd.openxmlformats-officedocument.wordprocessingml.document" || + file.type === "text/plain" || + file.type === "application/pdf" || + file.type === "application/x-zip-compressed" || + file.type === + "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" + ) { + // 添加到本地待上传 + let data = await getMinioUploadId(extension); + let run = new UploadChunk(file, data["upload_id"], data["filename"]); + let item: FileItem = { + id: generateUUID(), + file: file, + upload: { + handler: run, + progress: 0, + status: 0, + remark: "", + }, + }; + item.upload.handler.on("success", () => { + minioMergeVideo( + data["filename"], + data["upload_id"], + props.categoryIds.join(","), + item.file.name, + extension, + item.file.size, + 0, + "" + ).then(() => { + item.upload.progress = 100; + item.upload.status = item.upload.handler.getUploadStatus(); + setFileList([...localFileList.current]); + }); + }); + item.upload.handler.on("progress", (p: number) => { + item.upload.status = item.upload.handler.getUploadStatus(); + item.upload.progress = p >= 100 ? 99 : p; + setFileList([...localFileList.current]); + }); + item.upload.handler.on("error", (msg: string) => { + item.upload.status = item.upload.handler.getUploadStatus(); + item.upload.remark = msg; + setFileList([...localFileList.current]); + }); + // 先插入到ref + localFileList.current.push(item); + // 再更新list + setFileList([...localFileList.current]); + } else { + message.error(`${file.name} 并不是可上传文件`); + } + return Upload.LIST_IGNORE; + }, + }; + + const closeWin = () => { + if (fileList.length > 0) { + fileList.forEach((item) => { + if (item.upload.status !== 5 && item.upload.status !== 7) { + item.upload.handler.cancel(); + } + }); + } + props.onUpdate(); + localFileList.current = []; + setFileList([]); + setShowModal(false); + }; + + return ( + <> + + + {showModal ? ( + { + closeWin(); + }} + maskClosable={false} + closable={false} + onOk={() => { + closeWin(); + }} + okText="完成" + > + + + +

+ +

+

请将文件拖拽到此处上传

+

支持一次上传多个文件

+ + + + {record.file.name}, + }, + { + title: "大小", + dataIndex: "size", + key: "size", + render: (_, record) => ( + + {(record.file.size / 1024 / 1024).toFixed(2)}M + + ), + }, + { + title: "进度", + dataIndex: "progress", + key: "progress", + render: (_, record: FileItem) => ( + <> + {record.upload.status === 0 ? ( + "等待上传" + ) : ( + + )} + + ), + }, + { + title: "操作", + key: "action", + render: (_, record) => ( + <> + {record.upload.status === 5 ? ( + {record.upload.remark} + ) : null} + + {record.upload.status === 7 ? ( + 上传成功 + ) : null} + + ), + }, + ]} + dataSource={fileList} + /> + + + + ) : null} + + ); +}; diff --git a/src/pages/resource/courseware/index.tsx b/src/pages/resource/courseware/index.tsx index 7ea4ac2..0783571 100644 --- a/src/pages/resource/courseware/index.tsx +++ b/src/pages/resource/courseware/index.tsx @@ -16,7 +16,12 @@ import { useLocation } from "react-router-dom"; import { DownOutlined, ExclamationCircleFilled } from "@ant-design/icons"; import type { ColumnsType } from "antd/es/table"; import { dateFormat } from "../../../utils/index"; -import { TreeCategory, DurationText, PerButton } from "../../../compenents"; +import { + TreeCategory, + DurationText, + PerButton, + UploadCoursewareButton, +} from "../../../compenents"; const { confirm } = Modal; @@ -281,9 +286,15 @@ const ResourceCoursewarePage = () => {
+ { + resetList(); + }} + >