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({assets, 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 newFiles = [
        ...assets,
        file,
      ];
      const newAssets = newFiles.map(item=>({ type: "img", src: URL.createObjectURL(item) }));
      setFileList(newAssets);
      getImgs(newFiles);
    } 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 newFiles = [
        ...assets,
        file,
      ];
      const newAssets = newFiles.map(item=>({ type: "video", src: URL.createObjectURL(item) }));
      setFileList(newAssets);
    }

    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>
      <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/*"
          accept="image/png, image/jpeg, image/jpg"
          // capture="camera"
          onChange={handleUploadImage}
        />
      </div>
      <div className="hidden">
        <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),
//   }
// }