146 lines
3.7 KiB
TypeScript
146 lines
3.7 KiB
TypeScript
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;
|