104 lines
3.2 KiB
TypeScript
104 lines
3.2 KiB
TypeScript
import ossClie from "@/util/oss";
|
|
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 baseHttp from "@/service/base";
|
|
import SystemConfig from "@/service/apiConfig/systemConfig";
|
|
|
|
interface UploadFileProps {
|
|
imgList: Array<UploadFileEx>;
|
|
onChnage: Function;
|
|
}
|
|
|
|
interface UploadFileEx extends UploadFile {
|
|
systemImageId?: number;
|
|
bannerName?: 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 [fileList, 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 }) => {
|
|
let isChange: Boolean = false;
|
|
newFileList.forEach(async (item) => {
|
|
if (item.originFileObj) {
|
|
isChange = true;
|
|
await ossClie(newFileList[newFileList.length - 1].originFileObj).then(
|
|
(resUploadFileEx: UploadFileEx) => {
|
|
resUploadFileEx.uid = resUploadFileEx.name;
|
|
resUploadFileEx.bannerName = resUploadFileEx.name;
|
|
baseHttp.post( SystemConfig.AddImages, { url: resUploadFileEx.url }).then((resp)=>{
|
|
resUploadFileEx.systemImageId = resp.data.id;
|
|
resUploadFileEx.id = resp.data.id;
|
|
resUploadFileEx.redictUrl = "";
|
|
fileList.push(resUploadFileEx);
|
|
props.onChnage(fileList);
|
|
setFileList(fileList);
|
|
})
|
|
}
|
|
);
|
|
}
|
|
});
|
|
if (!isChange) {
|
|
props.onChnage(newFileList);
|
|
setFileList(newFileList);
|
|
}
|
|
};
|
|
const uploadButton = (
|
|
<div>
|
|
<PlusOutlined />
|
|
<div style={{ marginTop: 8 }}>Upload</div>
|
|
</div>
|
|
);
|
|
return (
|
|
<div style={{ margin: 10 }}>
|
|
<Upload
|
|
listType="picture-card"
|
|
fileList={fileList}
|
|
onPreview={handlePreview}
|
|
onChange={handleChange}
|
|
>
|
|
{fileList.length >= 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;
|