如果不是图片显示下载链接

src/components/ImageUploader.jsx

@@ -1,7 +1,6 @@
 import { useEffect, useState } from "react";
-import { Upload, List, Popconfirm } from "antd";
-
-import { UploadOutlined, DeleteOutlined } from "@ant-design/icons";
+import { Upload, List, Button, Space } from "antd";
+import { UploadOutlined, FileTextOutlined } from "@ant-design/icons";
 import { Image } from "antd";
 import { fetchJSON } from "@/utils/request";
 import { HT3_HOST } from "@/config";
@@ -109,7 +108,6 @@ export const ImageUploader = props => {
 	}, [key]);
 
 	// 处理删除操作
-
 	const handleDelete = async file => {
 		const success = await deleteImage(file.encrypt_key);
 		if (success) {
@@ -118,9 +116,9 @@ export const ImageUploader = props => {
 				props.onChange(newImages);
 			}
 			setFileList(newImages);
-			//console.log("删除成功");
+			console.log("删除成功");
 		} else {
-			//console.error("删除失败");
+			console.error("删除失败");
 		}
 	};
 
@@ -166,42 +164,12 @@ export const ImageUploader = props => {
 		setPreviewOpen(true);
 	};
 
-	const handleRemove = () => {
-		return false;
-	};
-
 	return (
 		<>
-			<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>
-						);
-					},
-				}}>
+			<Upload customRequest={handleUploadFile} multiple={true} onRemove={handleDelete} listType="picture-card" fileList={fileList} onPreview={handlePreview} onChange={handleChange}>
 				<div>
 					<UploadOutlined />
-					<div style={{ marginTop: 8 }}>上传图片</div>
+					<div style={{ marginTop: 8 }}>Upload</div>
 				</div>
 			</Upload>
 			<List loading={isLoading} dataSource={fileList} />
@@ -242,22 +210,22 @@ export const ImageViewer = props => {
 
 	return (
 		<>
-			<List
-				grid={{
-					gutter: 16,
-					sm: 2,
-					md: 8,
-					lg: 8,
-				}}
-				dataSource={fileList}
-				renderItem={item => {
-					return (
-						<List.Item>
-							<Image key={item.encrypt_key} width={200} src={item.url} />
-						</List.Item>
-					);
-				}}
-			/>
+			<Image.PreviewGroup>
+				<Space>
+					{fileList &&
+						fileList.map(item => {
+							return item.key.match(/\.(jpg|jpeg|png|gif|bmp|webp)$/i) ? (
+								<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">
+										Download File
+									</Button>
+								</a>
+							);
+						})}
+				</Space>
+			</Image.PreviewGroup>
 		</>
 	);
 };