相册视频事件

快速上手

const videoLimit = 2;

const Upload = () => {
  const formStore = FormStore.useContainer();
  const { formStates, changeFormStates } = formStore;
  const { videoList } = formStates;

  const handleVideoUploadClick = async () => {
    const list = await chooseVideo({ count: videoLimit - videoList.length });

    changeFormStates({ videoList: [...videoList, ...list] });
  };

  return (
    <div className={styles.wrap}>
      {
        //展示UI
        //     videoList.map(item => {
        //     const { id } = item;
        //     return <Grid content={item} key={id} type={'video'} />;
        // })
      }
      {videoList.length >= videoLimit || imageList.length ? null : (
        <div className={styles.imgUploadBtn} onClick={handleVideoUploadClick}>
          添加视频
        </div>
      )}
    </div>
  );
};

import { v4 as uuidv4 } from "uuid";

// 封装调起相册选择视频API
export const chooseVideo = async ({ count = 1 }) => {
  const videoId = "chooseVideo";
  // 获取上传文件的dom节点
  let chooseVideoId = document.getElementById(videoId);

  // 如果上传文件的dom节点不存在则创建
  if (!chooseVideoId) {
    const obj = document.createElement("input");

    obj.setAttribute("type", "file");
    obj.setAttribute("id", videoId);
    if (count > 1) {
      obj.setAttribute("multiple", "multiple");
    }
    obj.setAttribute("accept", "video/*");
    obj.setAttribute(
      "style",
      "position: fixed; top: -4000px; left: -3000px; z-index: -300;"
    );
    document.body.appendChild(obj);
    chooseVideoId = document.getElementById(videoId);
  } else if (count > 1) {
    chooseVideoId.setAttribute("multiple", "multiple");
  } else {
    chooseVideoId.removeAttribute("multiple");
  }

  // 创建鼠标点击事件
  const event = new MouseEvent("click");

  // 获取上传的视频
  const files = await new Promise((resolve) => {
    chooseVideoId.onchange = (e) => {
      resolve([...e.target.files]);
    };
    // 上传文件dom触发鼠标点击事件
    chooseVideoId.dispatchEvent(event);
  });

  const list = files.slice(0, count).map((file) => {
    const blob = new Blob([file], { type: "video/mp4" });
    const url = URL.createObjectURL(blob);

    return { path: url, size: file.size, type: file.type, file, id: uuidv4() };
  });

  return list;
};