84 lines
2.3 KiB
TypeScript
84 lines
2.3 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;
|