XZWALL/src/pages/Wall/WallAdd/index.tsx

import { Button, Input, message, Modal, Popconfirm, Select } from "antd";
import React, { useCallback, useEffect, useRef, useState } from "react";
import {
  PlusOutlined,
  CloseCircleOutlined,
  UploadOutlined,
  PlayCircleOutlined,
} from "@ant-design/icons";
import "./index.css";
import ImageLazy from "@/components/ImageLazy";
import {
  getWallDetailByIdAPI,
  wallUploadAPI,
  wallUpSaveAPI,
} from "@/store/action/wall";
import { WallUpSaveAPI } from "@/types";
import { useDispatch } from "react-redux";

type Props = {
  id: number;
  closeFu: () => void;
  upList: () => void;
};

// 上传附件的进度条
const UpAsyncLodingDom: any = document.querySelector("#UpAsyncLoding");
const progressDom: any = document.querySelector("#progress");

function WallAdd({ id, closeFu, upList }: Props) {
  const dispatch = useDispatch();

  // 上传的inputRef
  const myInput = useRef<HTMLInputElement>(null);

  // 类型
  const [type, setType] = useState<"img" | "video">("img");

  // 名称
  const [name, setName] = useState("");

  // 图片
  const [cover, setCover] = useState({ fileName: "", filePath: "" });

  // 视频
  const [video, setVideo] = useState({ fileName: "", filePath: "" });

  // 通过id获取详情
  const getInfoById = useCallback(async () => {
    const res = await getWallDetailByIdAPI(id);

    setType(res.data.type);

    setName(res.data.name);

    if (res.data.type === "img")
      setCover({ fileName: res.data.fileName, filePath: res.data.filePath });
    else setVideo({ fileName: res.data.fileName, filePath: res.data.filePath });
  }, [id]);
  // 进来看看是不是编辑
  useEffect(() => {
    if (id) getInfoById();
  }, [getInfoById, id]);

  // 上传图片或者视频
  const handeUpPhoto = useCallback(
    async (e: React.ChangeEvent<HTMLInputElement>) => {
      if (e.target.files) {
        // 拿到files信息
        const filesInfo = e.target.files[0];

        let typeArr = [] as string[];
        let tit1 = "";
        let fileSize = 20 * 1024 * 1024;
        let tit2 = "最大支持20M!";

        if (type === "img") {
          typeArr = ["image/jpeg", "image/png", "image/gif"];
          tit1 = "只支持jpg、png、gif格式!";
        } else {
          tit2 = "最大支持500M!";
          fileSize = 500 * 1024 * 1024;
          typeArr = ["video/mp4"];
          tit1 = "只支持mp4格式!";
        }

        // 校验格式
        if (!typeArr.includes(filesInfo.type)) {
          e.target.value = "";
          return message.warning(tit1);
        }

        // 校验大小
        if (filesInfo.size > fileSize) {
          e.target.value = "";
          return message.warning(tit2);
        }

        // 创建FormData对象
        const fd = new FormData();
        // 把files添加进FormData对象（‘photo’为后端需要的字段）
        fd.append("type", type);
        fd.append("file", filesInfo);
        e.target.value = "";

        const res: any = await wallUploadAPI(fd);
        if (res.code === 0) {
          message.success("上传成功!");

          // 上传的是图片
          if (type === "img") setCover(res.data);
          else setVideo(res.data);
        }
        UpAsyncLodingDom.style.opacity = 0;
        progressDom.style.width = "0%";
      }
    },
    [type]
  );

  // 点击确定
  const btnOkFu = useCallback(async () => {
    if (name === "") return message.warning("名称不能为空!");

    if (
      (type === "img" && cover.fileName === "") ||
      (type === "video" && video.fileName === "")
    )
      return message.warning("附件不能为空!");

    const obj: WallUpSaveAPI = {
      fileName: type === "img" ? cover.fileName : video.fileName,
      filePath: type === "img" ? cover.filePath : video.filePath,
      id: id ? id : null,
      name: name,
      type: type,
    };

    const res: any = await wallUpSaveAPI(obj);

    if (res.code === 0) {
      message.success(`${id ? "编辑" : "新增"}成功!`);

      upList();
      closeFu();
    }
  }, [
    closeFu,
    cover.fileName,
    cover.filePath,
    id,
    name,
    type,
    upList,
    video.fileName,
    video.filePath,
  ]);

  return (
    <Modal
      wrapClassName="wallAdd"
      destroyOnClose
      open={true}
      title={id ? "编辑" : "新增"}
      footer={
        [] // 设置footer为空，去掉 取消 确定默认按钮
      }
    >
      {/* 主要内容 */}
      <div className="wallAddMain">
        <div className="row">
          <div className="bs">*</div>
          <div className="lable">类型：</div>
          <Select
            value={type}
            onChange={(val) => setType(val)}
            style={{ width: 100 }}
            options={[
              { value: "img", label: "图片" },
              { value: "video", label: "视频" },
            ]}
          />
        </div>

        <div className="row">
          <div className="bs">*</div>
          <div className="lable">名称：</div>
          <Input
            maxLength={15}
            showCount
            style={{ width: 300 }}
            placeholder="请输入"
            value={name}
            onChange={(e) => setName(e.target.value.trim())}
          />
        </div>

        <div className="row">
          <div className="bs">*</div>
          <div className="lable">附件：</div>

          <div className="upBox">
            <input
              id="upInput"
              type="file"
              accept={type === "img" ? ".png,.jpg,.gif,.jpeg" : ".mp4"}
              ref={myInput}
              onChange={(e) => handeUpPhoto(e)}
            />
            {type === "img" ? (
              // 图片上传
              <>
                <div
                  hidden={cover.fileName !== ""}
                  className="fileBoxRow_up"
                  onClick={() => myInput.current?.click()}
                >
                  <PlusOutlined />
                </div>
                <div
                  className="fileBoxRow_r_img"
                  hidden={cover.fileName === ""}
                >
                  {cover.filePath ? (
                    <ImageLazy width={120} height={120} src={cover.filePath} />
                  ) : null}

                  <Popconfirm
                    title="删除后无法恢复，是否删除?"
                    okText="删除"
                    cancelText="取消"
                    onConfirm={() => setCover({ fileName: "", filePath: "" })}
                  >
                    <div className="clearCover">
                      <CloseCircleOutlined />
                    </div>
                  </Popconfirm>
                </div>
              </>
            ) : (
              // 视频上传
              <>
                <div className="upVideo">
                  <Button
                    onClick={() => myInput.current?.click()}
                    icon={<UploadOutlined />}
                  >
                    上传
                  </Button>
                </div>
                {/* 视频上传成功之后的信息 */}
                <div className="upVideoSucc">
                  <div className="upVideoSuccTxt">{video.fileName}</div>
                  <div
                    className="lookVideoIncoBox"
                    hidden={!video.fileName}
                    onClick={() =>
                      dispatch({
                        type: "login/lookVideo",
                        payload: video.filePath,
                      })
                    }
                  >
                    <PlayCircleOutlined />
                  </div>
                  <Popconfirm
                    title="删除后无法恢复，是否删除?"
                    okText="删除"
                    cancelText="取消"
                    onConfirm={() => setVideo({ fileName: "", filePath: "" })}
                  >
                    <div className="clearCover" hidden={!video.fileName}>
                      <CloseCircleOutlined />
                    </div>
                  </Popconfirm>
                </div>
              </>
            )}

            {/* 图片上传提示 */}
            <div className="fileBoxRow_r_tit" hidden={type !== "img"}>
              图片格式：支持png、jpg、gif和jpeg的图片格式；最大支持20M。
            </div>

            {/* 视频上传提示 */}
            <div className="fileBoxRow_r_tit" hidden={type !== "video"}>
              视频格式：仅支持MP4格式的视频文件，大小不得超过500MB。
            </div>
          </div>
        </div>
      </div>

      {/* 确定按钮 */}
      <div className="wallAddBtn">
        <Button type="primary" onClick={btnOkFu}>
          提交
        </Button>
        &emsp;
        <Popconfirm
          title="放弃编辑后，信息将不会保存!"
          okText="放弃"
          cancelText="取消"
          onConfirm={closeFu}
        >
          <Button>取消</Button>
        </Popconfirm>
      </div>
    </Modal>
  );
}

const MemoWallAdd = React.memo(WallAdd);

export default MemoWallAdd;