显示文件名和下载按钮

src/components/ImageUploader.jsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
-import { Upload, List, Button, Space } from "antd";
+import { Upload, List, Button, Space,Popconfirm } from "antd";
-import { UploadOutlined, FileTextOutlined } from "@ant-design/icons";
+import { UploadOutlined, FileTextOutlined,DeleteOutlined } from "@ant-design/icons";
 import { Image } from "antd";
 import { fetchJSON } from "@/utils/request";
 import { HT3_HOST } from "@/config";
@@ -116,9 +116,9 @@ export const ImageUploader = props => {
 				props.onChange(newImages);
 			}
 			setFileList(newImages);
-			console.log("删除成功");
+			//console.log("删除成功");
 		} else {
-			console.error("删除失败");
+			//console.error("删除失败");
 		}
 	};
 
@@ -164,9 +164,39 @@ export const ImageUploader = props => {
 		setPreviewOpen(true);
 	};
 
+	const handleRemove = () => {
+		return false;
+	};
+
 	return (
 		<>
-			<Upload customRequest={handleUploadFile} multiple={true} onRemove={handleDelete} 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 }}>Upload</div>
@@ -218,8 +248,8 @@ export const ImageViewer = props => {
 								<Image key={item.encrypt_key} width={200} src={item.url} />
 							) : (
 								<a key={item.encrypt_key} href={item.url} download>
-									<Button type="primary" icon={<FileTextOutlined />} size="large">
+									<Button type="primary" icon={<FileTextOutlined />} size="large" title={item.key.replace(/^.*[\\/]/, '')}>
-										Download File
+										...{item.key.slice(-10)}
 									</Button>
 								</a>
 							);