68 lines
2.7 KiB
TypeScript
68 lines
2.7 KiB
TypeScript
|
import { useEffect, useState } from "react";
|
||
|
|
// import UncoverAvatarUploader from "../uploader/UncoverAvatarUploader ";
|
||
|
|
import { Upload, Progress, Button, Image, Form } from "antd";
|
||
|
|
import { DeleteOutlined } from "@ant-design/icons";
|
||
|
|
import AvatarUploader from "./AvatarUploader";
|
||
|
|
import { isEqual } from 'lodash';
|
||
|
|
|
||
|
|
interface MultiAvatarUploaderProps {
|
||
|
|
value?: string[];
|
||
|
|
onChange?: (value: string[]) => void;
|
||
|
|
}
|
||
|
|
|
||
|
|
export function MultiAvatarUploader({
|
||
|
|
value,
|
||
|
|
onChange,
|
||
|
|
}: MultiAvatarUploaderProps) {
|
||
|
|
const [imageList, setImageList] = useState<string[]>(value || [])
|
||
|
|
const [previewImage, setPreviewImage] = useState<string>("");
|
||
|
|
useEffect(() => {
|
||
|
|
if (!isEqual(value, imageList)) {
|
||
|
|
setImageList(value || []);
|
||
|
|
}
|
||
|
|
}, [value]);
|
||
|
|
useEffect(() => {
|
||
|
|
onChange?.(imageList)
|
||
|
|
}, [imageList])
|
||
|
|
return <>
|
||
|
|
<div className="flex gap-2 mb-2" style={{ width: "1200px" }}>
|
||
|
|
{imageList.map((image, index) => {
|
||
|
|
return (
|
||
|
|
<div className="mr-2px relative" key={index} style={{ width: "200px", height: "100px" }} >
|
||
|
|
<Image alt="" style={{ width: "200px", height: "100px" }} src={image}
|
||
|
|
preview={{
|
||
|
|
visible: previewImage === image,
|
||
|
|
onVisibleChange: (visible) =>
|
||
|
|
setPreviewImage(visible ? image || "" : "")
|
||
|
|
}} >
|
||
|
|
</Image>
|
||
|
|
<Button
|
||
|
|
type="text"
|
||
|
|
danger
|
||
|
|
icon={<DeleteOutlined className="text-red" />}
|
||
|
|
onClick={() => image && setImageList(imageList.filter((_, i) => i !== index))}
|
||
|
|
style={{
|
||
|
|
position: "absolute", // 绝对定位
|
||
|
|
top: "0", // 顶部对齐
|
||
|
|
right: "0", // 右侧对齐
|
||
|
|
zIndex: 1, // 确保按钮在图片上方
|
||
|
|
padding: "4px", // 调整按钮内边距
|
||
|
|
backgroundColor: "rgba(255, 255, 255, 0.2)", // 半透明背景
|
||
|
|
borderRadius: "50%", // 圆形按钮
|
||
|
|
}}
|
||
|
|
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
<div className="flex">
|
||
|
|
<AvatarUploader showCover={false} successText={'轮播图上传成功'} onChange={(value) => {
|
||
|
|
console.log(value);
|
||
|
|
setImageList([...imageList, value])
|
||
|
|
}}></AvatarUploader>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
</>;
|
||
|
|
}
|
||
|
|
export default MultiAvatarUploader;
|