tiefen_space_h5/components/UploadImgs/index.js

import React, { useState } from "react";
import { DotLoading, Image, ImageViewer } from "antd-mobile";
import { uploadImage, uploadVideo } from "@/utils/upload";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faAdd, faClose } from "@fortawesome/free-solid-svg-icons";
export default function UploadImgs({ getImgs }) {
  const maxCount = 6;
  const [fileList, setFileList] = useState([]);
  const [loading, setLoading] = useState(false);
  const handleUploadImage = async (e) => {
    let file = e.target.files[0];

    if (!file) return;
    setLoading(true);
    if (file.type.indexOf("image/") != -1) {
      // const image = await uploadImage(file);
      // getImgs((old) => [...old, image.id]);
      const assets = [
        ...fileList,
        { type: "img", src: URL.createObjectURL(file) },
      ];
      setFileList(assets);
    } else if (file.type.indexOf("video/") != -1) {
      const videoD = document.getElementById("videoD");
      const videoC = document.getElementById("videoC");
      console.log("videoC", videoC);
      const ctx = videoC?.getContext("2d");
      // 设置Canvas的宽度和高度与视频一致
      videoC.width = videoD.videoWidth;
      videoC.height = videoD.videoHeight;
      // 在Canvas上绘制当前视频帧
      ctx.drawImage(videoD, 0, 0, videoC.width, videoC.height);
      // 将Canvas转换为图片URL
      const frameImageUrl = videoC.toDataURL();

      // 输出图片URL
      console.log(frameImageUrl);
      console.log("ddddd", file, {
        type: "video",
        src: frameImageUrl,
      });
      // const video = await uploadVideo(file);
      // getImgs((old) => [...old, video.id]);
      // setFileList((old) => [...old, video]);
      const assets = [
        ...fileList,
        { type: "video", src: URL.createObjectURL(file) },
      ];
      setFileList(assets);
    }

    setLoading(false);
  };
  const handleRemoveItem = (index) => {
    console.log(index);
    let newArr = [...fileList];
    newArr.splice(index, 1);
    setFileList(newArr);
  };
  const showPhotos = (images, index) => {
    ImageViewer.Multi.show({
      images: images.map(
        (item) => "https://file.wishpaldev.tech/" + item?.src_id
      ),
      defaultIndex: index,
    });
  };
  return (
    // <ImageUploader
    //   value={fileList}
    //   onChange={setFileList}
    //   upload={handleUploadImage}
    //   multiple={true}
    //   maxCount={9}
    //   showUpload={fileList.length < maxCount}
    //   onCountExceed={(exceed) => {
    //     Toast.show(`最多选择 ${maxCount} 张图片，你多选了 ${exceed} 张`);
    //   }}
    // >
    //     <div className="flex justify-center items-center h-[80px] w-[80px] border-2 border-gray-400 border-dashed rounded-md text-2xl text-gray-400">+</div>
    // </ImageUploader>
    <div className="grid grid-cols-4 gap-1">
      {fileList.map((item, index) => {
        return (
          <div key={index} className="rounded relative">
            <Image
              src={item?.src}
              width="100%"
              height="100%"
              className="rounded"
              onClick={() => showPhotos(fileList, index)}
            />
            <div
              className="h-4 w-4 bg-[#33333380] absolute top-0 right-0 flex justify-center items-center"
              onClick={() => handleRemoveItem(index)}
            >
              <FontAwesomeIcon icon={faClose} size="sm" />
            </div>
          </div>
        );
      })}
      {loading && (
        <div className="rounded border-[#ffffff80] text-[#ffffff80] flex flex-col justify-center items-center">
          <DotLoading />
          <p>上传中</p>
        </div>
      )}
      <label htmlFor="uploadAvatarBtn">
        <div
          className="border-2 border-[#ffffff80] text-[#ffffff80] rounded border-dashed w-full h-full flex justify-center items-center"
          style={{ minHeight: "calc(25vw - 0.75rem)" }}
        >
          <FontAwesomeIcon icon={faAdd} size="2xl" />
        </div>
      </label>
      <input
        type="file"
        id="uploadAvatarBtn"
        style={{ display: "none" }}
        accept="image/png, image/jpeg, video/*"
        // capture="camera"
        onChange={handleUploadImage}
      />
      <div>
        <video id="videoD">
          <source src={fileList[0]?.src} />
          您的浏览器不支持 Video 标签。
        </video>
        <canvas id="videoC" />
      </div>
    </div>
  );
}
// export async function mockUpload(file) {
//   await sleep(3000)
//   return {
//     url: URL.createObjectURL(file),
//   }
// }