91 lines
2.5 KiB
TypeScript
91 lines
2.5 KiB
TypeScript
import Modal from "antd/lib/modal";
|
|
import { PlusOutlined } from "@ant-design/icons";
|
|
import Upload, { RcFile, UploadFile, UploadProps } from "antd/lib/upload";
|
|
import { useEffect, useState } from "react";
|
|
import Config from "@/util/config";
|
|
|
|
interface UploadFileProps {
|
|
imgList: Array<UploadFileEx>;
|
|
onChnage: Function;
|
|
maxCount?: number;
|
|
}
|
|
|
|
interface UploadFileEx extends UploadFile {
|
|
systemImageId?: number;
|
|
bannerName?: string;
|
|
file_name?: string;
|
|
file_url?: string;
|
|
redictUrl?: string;
|
|
id?: number;
|
|
}
|
|
|
|
const getBase64 = (file: RcFile): Promise<string> =>
|
|
new Promise((resolve, reject) => {
|
|
const reader = new FileReader();
|
|
reader.readAsDataURL(file);
|
|
reader.onload = () => resolve(reader.result as string);
|
|
reader.onerror = (error) => reject(error);
|
|
});
|
|
|
|
const AliUpload = (props: UploadFileProps) => {
|
|
const [previewOpen, setPreviewOpen] = useState(false);
|
|
const [previewImage, setPreviewImage] = useState("");
|
|
const [previewTitle, setPreviewTitle] = useState("");
|
|
const [files, setFileList] = useState<UploadFile[]>([]);
|
|
const handleCancel = () => setPreviewOpen(false);
|
|
const handlePreview = async (file: UploadFile) => {
|
|
if (!file.url && !file.preview) {
|
|
file.preview = await getBase64(file.originFileObj as RcFile);
|
|
}
|
|
setPreviewImage(file.url || (file.preview as string));
|
|
setPreviewOpen(true);
|
|
setPreviewTitle(
|
|
file.name || file.url!.substring(file.url!.lastIndexOf("/") + 1)
|
|
);
|
|
};
|
|
|
|
useEffect(() => {
|
|
setFileList(props.imgList);
|
|
}, [props.imgList]);
|
|
|
|
const handleChange: UploadProps["onChange"] = ({ fileList: newFileList }) => {
|
|
newFileList.forEach((i) => {
|
|
i.url = `${Config.baseUrl}uploads/` + i.name;
|
|
i.fileName = i.name;
|
|
});
|
|
setFileList(newFileList);
|
|
props.onChnage(newFileList);
|
|
};
|
|
const uploadButton = (
|
|
<div>
|
|
<PlusOutlined />
|
|
<div style={{ marginTop: 8 }}>Upload</div>
|
|
</div>
|
|
);
|
|
|
|
return (
|
|
<div style={{ margin: 10 }}>
|
|
<Upload
|
|
listType="picture-card"
|
|
fileList={files}
|
|
action={`${Config.baseUrl}v1/public/fts/upload`}
|
|
onPreview={handlePreview}
|
|
maxCount={props.maxCount ?? 4}
|
|
onChange={handleChange}
|
|
>
|
|
{files.length >= (props.maxCount??4) ? null : uploadButton}
|
|
</Upload>
|
|
<Modal
|
|
open={previewOpen}
|
|
title={previewTitle}
|
|
footer={null}
|
|
onCancel={handleCancel}
|
|
>
|
|
<img alt="example" style={{ width: "100%" }} src={previewImage} />
|
|
</Modal>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default AliUpload;
|