diff --git a/src/components/ImageUploader.jsx b/src/components/ImageUploader.jsx index 7f8593b..2254a71 100644 --- a/src/components/ImageUploader.jsx +++ b/src/components/ImageUploader.jsx @@ -1,5 +1,6 @@ import { useEffect, useState } from "react"; -import { Upload, List, Modal } from "antd"; +import { Upload, List, Popconfirm } from "antd"; + import { UploadOutlined } from "@ant-design/icons"; import { Image } from "antd"; import { fetchJSON } from "@/utils/request"; @@ -108,30 +109,19 @@ export const ImageUploader = props => { }, [key]); // 处理删除操作 - const handleDelete = file => { - Modal.confirm({ - title: "确认删除", - content: "确定要删除这张图片吗?", - okText: "确认", - cancelText: "取消", - onOk: async () => { - const success = await deleteImage(file.encrypt_key); - if (success) { - const newImages = fileList.filter(item => item.encrypt_key !== file.encrypt_key); - if (props.onChange) { - props.onChange(newImages); - } - setFileList(newImages); - console.log("删除成功"); - } else { - console.error("删除失败"); - } - }, - onCancel: () => { - // 用户点击取消,重新设置fileList以刷新Upload组件 - setFileList([...fileList]); - }, - }); + + const handleDelete = async file => { + const success = await deleteImage(file.encrypt_key); + if (success) { + const newImages = fileList.filter(item => item.encrypt_key !== file.encrypt_key); + if (props.onChange) { + props.onChange(newImages); + } + setFileList(newImages); + //console.log("删除成功"); + } else { + //console.error("删除失败"); + } }; // 处理上传操作 @@ -176,9 +166,31 @@ export const ImageUploader = props => { setPreviewOpen(true); }; + const handleRemove = file => { + + return ( + handleDelete(file)} + onCancel={() => setFileList([...fileList])} + okText="Yes" + cancelText="No" + > + + + ); + // 返回 false 阻止默认的删除行为,让 Popconfirm 来处理 + return false; + }; + + const itemRender = (originNode, file, fileList, actions) => { + + }; + return ( <> - +
上传图片
@@ -240,4 +252,4 @@ export const ImageViewer = props => { ); }; -export default ImageUploader; +export default ImageUploader; \ No newline at end of file