添加删除确认款

src/components/ImageUploader.jsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from "react";
 import { Upload, List, Popconfirm } from "antd";
 
-import { UploadOutlined } from "@ant-design/icons";
+import { UploadOutlined, DeleteOutlined } from "@ant-design/icons";
 import { Image } from "antd";
 import { fetchJSON } from "@/utils/request";
 import { HT3_HOST } from "@/config";
@@ -166,31 +166,39 @@ export const ImageUploader = props => {
 		setPreviewOpen(true);
 	};
 
-	const handleRemove = file => {	
-		
-		return (
-			<Popconfirm
-				title="Confirm deletion"
-				description="Confirm deletion of this file?"
-				onConfirm={() => handleDelete(file)}
-				onCancel={() => setFileList([...fileList])}
-				okText="Yes"
-				cancelText="No"
-			>
-			
-			</Popconfirm>
-		);
-		// 返回 false 阻止默认的删除行为，让 Popconfirm 来处理
+	const handleRemove = () => {
 		return false;
 	};
 
-	const itemRender = (originNode, file, fileList, actions) => {
-
-	};
-
 	return (
 		<>
-			<Upload customRequest={handleUploadFile} multiple={true} onRemove={handleRemove} listType="picture-card" fileList={fileList} onPreview={handlePreview} onChange={handleChange} >
+			<Upload
+				customRequest={handleUploadFile}
+				multiple={true}
+				onRemove={handleRemove}
+				listType="picture-card"
+				fileList={fileList}
+				onPreview={handlePreview}
+				onChange={handleChange}
+				showUploadList={{
+					showDownloadIcon: true,
+					showRemoveIcon: true,
+					removeIcon: file => {
+						return (
+							<Popconfirm
+								title="删除"
+								description="是否要删除文件?"
+								onConfirm={() => {
+									handleDelete(file);
+								}}
+								onCancel={() => setFileList([...fileList])}
+								okText="是"
+								cancelText="否">
+								<DeleteOutlined />
+							</Popconfirm>
+						);
+					},
+				}}>
 				<div>
 					<UploadOutlined />
 					<div style={{ marginTop: 8 }}>上传图片</div>
@@ -252,4 +260,4 @@ export const ImageViewer = props => {
 	);
 };
 
-export default ImageUploader;
+export default ImageUploader;