cunkebao_v3/nkebao/src/components/Upload/VideoUpload.tsx

import React, { useState } from "react";
import { Upload, message } from "antd";
import { LoadingOutlined, PlusOutlined } from "@ant-design/icons";
import type { UploadProps, UploadFile } from "antd/es/upload/interface";
import style from "./index.module.scss";

interface VideoUploadProps {
  value?: string;
  onChange?: (url: string) => void;
  disabled?: boolean;
  className?: string;
}

const VideoUpload: React.FC<VideoUploadProps> = ({
  value = "",
  onChange,
  disabled = false,
  className,
}) => {
  const [loading, setLoading] = useState(false);
  const [fileList, setFileList] = useState<UploadFile[]>([]);

  React.useEffect(() => {
    if (value) {
      const file: UploadFile = {
        uid: "-1",
        name: "video",
        status: "done",
        url: value || "", // 确保 URL 不为 undefined
      };
      setFileList([file]);
    } else {
      setFileList([]);
    }
  }, [value]);

  // 文件验证
  const beforeUpload = (file: File) => {
    const isVideo = file.type.startsWith("video/");
    if (!isVideo) {
      message.error("只能上传视频文件！");
      return false;
    }
    const isLt50M = file.size / 1024 / 1024 < 50;
    if (!isLt50M) {
      message.error("视频大小不能超过50MB！");
      return false;
    }
    return true; // 允许上传
  };

  // 处理文件变化
  const handleChange: UploadProps["onChange"] = info => {
    console.log("VideoUpload handleChange info:", info);

    // 更新 fileList，确保所有 URL 都是字符串
    const updatedFileList = info.fileList.map(file => ({
      ...file,
      url:
        file.url ||
        file.response?.data ||
        file.response?.url ||
        file.response ||
        "",
    }));

    setFileList(updatedFileList);

    // 处理上传状态
    if (info.file.status === "uploading") {
      setLoading(true);
    } else if (info.file.status === "done") {
      setLoading(false);
      message.success("上传成功");

      // 从响应中获取上传后的URL
      const uploadedUrl =
        info.file.response?.data ||
        info.file.response?.url ||
        info.file.response ||
        "";
      if (uploadedUrl) {
        // 调用onChange
        onChange?.(uploadedUrl);
      }
    } else if (info.file.status === "error") {
      setLoading(false);
      message.error("上传失败，请重试");
    } else if (info.file.status === "removed") {
      // 文件被删除
      onChange?.("");
    }
  };

  // 删除文件
  const handleRemove = () => {
    setFileList([]);
    onChange?.("");
    return true;
  };

  const uploadButton = (
    <div className={style["upload-button"]}>
      {loading ? (
        <div className={style["uploading"]}>
          <LoadingOutlined className={style["upload-icon"]} />
          <div className={style["upload-text"]}>上传中...</div>
        </div>
      ) : (
        <>
          <PlusOutlined className={style["upload-icon"]} />
          <div className={style["upload-text"]}>上传视频</div>
        </>
      )}
    </div>
  );

  const action = import.meta.env.VITE_API_BASE_URL + "/v1/attachment/upload";

  return (
    <div className={`${style["upload-container"]} ${className || ""}`}>
      <Upload
        name="file"
        headers={{
          Authorization: `Bearer ${localStorage.getItem("token")}`,
        }}
        action={action}
        multiple={false}
        fileList={fileList}
        accept="video/*"
        listType="text"
        showUploadList={true}
        disabled={disabled || loading}
        beforeUpload={beforeUpload}
        onChange={handleChange}
        onRemove={handleRemove}
        maxCount={1}
      >
        {fileList.length >= 1 ? null : uploadButton}
      </Upload>
    </div>
  );
};

export default VideoUpload;