YunNan_BiJiangGuQiang/后台管理/src/components/ZupAudio/index.tsx

import React, { useCallback, useRef } from "react";
import styles from "./index.module.scss";
import { MessageFu } from "@/utils/message";
import { API_upFile } from "@/store/action/layout";
import { fileDomInitialFu } from "@/utils/domShow";
import { UploadOutlined, DeleteOutlined, EyeOutlined } from "@ant-design/icons";
import store from "@/store";
import MyPopconfirm from "../MyPopconfirm";

export type ZupAudioType = {
  fileName: string;
  filePath: string;
};

type Props = {
  fileInfo: ZupAudioType;
  upDataFu: (info: ZupAudioType) => void;
  delFu: () => void;
  dirCode: string;
  myUrl: string;
  size?: number;
  isLook?: boolean;
};

function ZupAudio({
  size = 10,
  isLook = false,
  fileInfo,
  upDataFu,
  delFu,
  dirCode,
  myUrl,
}: Props) {
  // 上传 无障碍音频的 点击
  const handeUpAudio = useCallback(
    async (e: React.ChangeEvent<HTMLInputElement>) => {
      if (e.target.files) {
        // 拿到files信息
        const filesInfo = e.target.files[0];
        // console.log("-----", filesInfo);

        // 校验格式
        const type = ["audio/mpeg"];
        if (!type.includes(filesInfo.type)) {
          e.target.value = "";
          return MessageFu.warning(`只支持.mp3格式!`);
        }

        // 校验大小
        if (filesInfo.size > size * 1024 * 1024) {
          e.target.value = "";
          return MessageFu.warning(`最大支持${size}M!`);
        }
        // 创建FormData对象
        const fd = new FormData();

        fd.append("type", "audio");
        fd.append("dirCode", dirCode);
        fd.append("file", filesInfo);
        e.target.value = "";

        try {
          const res = await API_upFile(fd, myUrl);
          if (res.code === 0) {
            MessageFu.success("上传成功!");
            // console.log(res);
            upDataFu(res.data);
          }
          fileDomInitialFu();
        } catch (error) {
          fileDomInitialFu();
        }
      }
    },
    [dirCode, myUrl, size, upDataFu]
  );

  // 上传附近的ref
  const myInput = useRef<HTMLInputElement>(null);

  return (
    <div
      className={styles.ZupAudio}
      id="upInputAudioBox"
      hidden={isLook && !fileInfo.filePath}
    >
      {/* 上传无障碍音频 */}
      <input
        id="upInputAudio"
        type="file"
        accept=".mp3"
        onChange={(e) => handeUpAudio(e)}
        ref={myInput}
      />
      {fileInfo.filePath ? (
        <div className="ZupAudio2">
          <div title={fileInfo.fileName}>{fileInfo.fileName}</div>
          <EyeOutlined
            title="预览"
            onClick={() =>
              store.dispatch({
                type: "layout/lookDom",
                payload: { src: fileInfo.filePath, type: "audio" },
              })
            }
          />

          {isLook ? null : (
            <>
              &nbsp;
              <MyPopconfirm
                txtK="删除"
                onConfirm={delFu}
                Dom={
                  <DeleteOutlined
                    title="删除"
                    className="ZTbox2X"
                    rev={undefined}
                  />
                }
              />
            </>
          )}
        </div>
      ) : (
        <div className="ZupAudio1" onClick={() => myInput.current?.click()}>
          <UploadOutlined />
          <div className="ZupAudio1_1">
            <p>上传无障碍音频</p>
            <p>支持{size}MB以下mp3格式</p>
          </div>
        </div>
      )}
    </div>
  );
}

const MemoZupAudio = React.memo(ZupAudio);

export default MemoZupAudio;