ball_admin/src/pages/archives/file_list.tsx

import {
  Button,
  message,
  Modal,
  Popconfirm,
  Space,
  Upload,
  UploadFile,
  UploadProps,
} from "antd";
import { useEffect, useState } from "react";
import { inject, observer } from "mobx-react";
import FileViewer from "@codesmith-99/react-file-preview";
import { UploadOutlined } from "@ant-design/icons";
import Config from "@/util/config";

interface ArchiveUploadFile extends UploadFile {
  file_type: string | undefined;
  file_url: string | undefined;
}
const FileListPage = (props: any) => {
  const { folderStore, archivesStore, id } = props;
  const [fileList, setFileList] = useState<ArchiveUploadFile[]>([]);
  const [isModalOpen, setIsModalOpen] = useState<boolean>(false);
  const [fileNmae, setFileName] = useState<string>("");
  const bprops: UploadProps = {
    name: "file",
    action: `${Config.baseUrl}v1/public/fts/upload`,
    headers: {
      authorization: "authorization-text",
    },
    onChange(info) {
      if (info.file.status === "done") {
        message.success(`${info.file.name} file uploaded successfully`);
        saveHandler(info.fileList);
      } else if (info.file.status === "error") {
        message.error(`${info.file.name} file upload failed.`);
      }
    },
  };
  const getFileList = () => {
    folderStore.getAlist(id).then((res) => {
      setFileList(folderStore.alist);
    });
  };
  useEffect(() => {
    getFileList();
  // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [id]);
  const getFileTypeFromUrl = (url) => {
    if (url === "" || url.length === 0) return;
    // 解析URL以提取文件名
    const filename = url.split("/").pop();
    // 获取文件扩展名
    const fileExtension = filename.split(".").pop();
    // 返回文件扩展名
    return fileExtension;
  };

  const preView = (imageUrl) => {
    let fileType = getFileTypeFromUrl(imageUrl);
    switch (fileType) {
      case "jpeg":
        return <img style={{ width: "100%" }} src={imageUrl} alt="" />;
      case "jpg":
        return <img style={{ width: "100%" }} src={imageUrl} alt="" />;
      case "png":
        return <img style={{ width: "100%" }} src={imageUrl} alt="" />;
      case "pdf":
        return (
          <div style={{ width: "100%", height: "500px" }}>
            <iframe
              style={{ width: "100%", height: "500px" }}
              src={imageUrl}
              title="描述"
            ></iframe>
            ;
          </div>
        );
      case "mp4":
        return (
          <div key={imageUrl} style={{ width: "100%", height: "600px" }}>
            <video
              controls
              style={{ width: "100%", height: "600px" }}
              src={imageUrl}
            ></video>
          </div>
        );
      case "docx":
        return (
          <div key={imageUrl} style={{ width: "100%", height: "600px" }}>
            <FileViewer
              loader={undefined}
              src={imageUrl}
              fileName="docx"
              onError={(e) => {
                console.log("error doc", e);
              }}
            />
          </div>
        );
      case "":
        return <div style={{ width: "100%", height: "600px" }}></div>;
      default:
        return <div style={{ width: "100%", height: "600px" }}></div>;
    }
  };
  const saveHandler = (files) => {
    let file = files[files.length - 1];
    file = {
      file_url: file.url,
      file_type: file.type,
      file_name: file.name,
      ...file,
    };
    archivesStore.save(id, [file]).then(() => {
      getFileList();
    });
  };

  return (
    <div style={{ margin: "10px" }}>
      <div style={{ margin: "10px" }}>
        <Upload {...bprops}>
          <Button icon={<UploadOutlined />}>文件上传</Button>
        </Upload>
      </div>
      {fileList?.map((item: any) => {
        return (
          <div key={item?.identity} style={{ display: "flex", margin: "10px" }}>
            <Space>
              <span className="text-overflow"> {item?.file_name}</span>
              <Button
                onClick={() => {
                  setFileName(Config.baseUrl + "/uploads/" + item?.file_name);
                  setIsModalOpen(true);
                }}
              >
                预览
              </Button>
              <a href={item?.file_url} download={item.file_name}>
                下载
              </a>
              <Popconfirm
                title="删除文件"
                description="是否删除文件?"
                onConfirm={() => {
                  archivesStore.deleteItem(item.id).then(() => {
                    getFileList();
                  });
                }}
                onCancel={() => {}}
                okText="Yes"
                cancelText="No"
              >
                <Button danger variant="solid" size="small">
                  删除
                </Button>
              </Popconfirm>
            </Space>
          </div>
        );
      })}
      <Modal
        title="文件预览"
        footer={null}
        width={1200}
        height={500}
        open={isModalOpen}
        onCancel={() => setIsModalOpen(false)}
      >
        {preView(fileNmae)}
      </Modal>
    </div>
  );
};
export default inject("archivesStore", "folderStore")(observer(FileListPage));