GHHub/src/components/ImageUploader.jsx

import { useEffect, useState } from "react";
import { Upload, List } from "antd";
import { UploadOutlined } from "@ant-design/icons";
import { Image } from "antd";
import { fetchJSON } from "@/utils/request";
import { HT3_HOST } from "@/config";

// 加密函数
const simple_encrypt = text => {
	const key = "TPDa*UU8h5%!zS";
	let encrypted = [];
	let keyIndex = 0;
	for (let i = 0; i < text.length; i++) {
		const charCode = text.charCodeAt(i);
		const keyCharCode = key.charCodeAt(keyIndex);
		const encryptedChar = charCode ^ keyCharCode;
		encrypted.push(encryptedChar);
		keyIndex = (keyIndex + 1) % key.length;
	}
	return encrypted.map(byte => byte.toString(16).padStart(2, "0")).join("");
};

// 获取图片列表
const getImageList = async key => {
	try {
		const { errcode, result } = await fetchJSON(`${HT3_HOST}/oss/list_unique_key?key=${key}`);
		if (errcode === 0) {
			return result
				.map(file => ({
					key: file.key,
					encrypt_key: file.encrypt_key,
					size: file.size,
					status: "done",
					url: file.url,
					last_modified: file.last_modified,
				}))
				.sort((a, b) => {
					const dateA = new Date(a.last_modified);
					const dateB = new Date(b.last_modified);
					return dateA - dateB;
				});
		}
	} catch (error) {
		console.error("获取图片列表失败", error);
	}
	return [];
};

// 删除图片
const deleteImage = async key => {
	try {
		const { errcode } = await fetchJSON(`${HT3_HOST}/oss/delete_unique_key?key=${key}`, {
			method: "GET",
		});
		return errcode === 0;
	} catch (error) {
		console.error("删除图片失败", error);
		return false;
	}
};

// 获取上传签名
const getSignature = async (file, key, onSuccess, onError) => {
	try {
		const { errcode, result } = await fetchJSON(`${HT3_HOST}/oss/signature_unique_key?key=${key}&filename=${file.name}`);
		if (errcode === 0) {
			const { method, host, signed_headers } = result;
			const response = await fetch(host, {
				method,
				headers: signed_headers,
				body: file,
			});
			if (response.ok) {
				onSuccess(response, file);
			} else {
				onError(new Error("图片上传失败"));
			}
		}
	} catch (error) {
		console.error("获取签名失败:", error);
		onError(error);
	}
};

const ImageUploader = props => {
	const [fileList, setFileList] = useState([]);
	const [isLoading, setIsLoading] = useState(false);
	const [previewOpen, setPreviewOpen] = useState(false);
	const [previewImage, setPreviewImage] = useState("");
	const key = simple_encrypt(props.osskey);

	// 组件挂载时获取图片列表
	useEffect(() => {
		const loadImages = async () => {
			setIsLoading(true);
			const images = await getImageList(key);
			setFileList(images);
			setIsLoading(false);
		};

		if (key) {
			loadImages();
		}
	}, [key]);

	// 处理删除操作
	const handleDelete = async file => {
		const success = await deleteImage(file.encrypt_key);
		if (success) {
			setFileList(prevList => prevList.filter(item => item.key !== file.key));
			console.log("删除成功");
		} else {
			console.error("删除失败");
		}
	};

	// 处理上传操作
	const handleChange = ({ fileList: newFileList }) => {
		setFileList(newFileList);
	};

	const handleUploadFile = ({ file, onProgress, onSuccess, onError }) => {
		getSignature(
			file,
			key,
			(response, file) => {
				getImageList(key).then(newImages => {
					setFileList(prevList => {
						// 找到当前正在上传的文件并移除
						const index = prevList.findIndex(item => item.status === "uploading");
						if (index !== -1) {
							const newPrevList = [...prevList];
							newPrevList.splice(index, 1);
							// 找出新增元素
							const newItems = newImages.filter(newItem => !newPrevList.some(prevItem => prevItem.key === newItem.key));
							// 将新增元素添加到过滤后的列表末尾
							return [...newPrevList, ...newItems];
						}
						return prevList;
					});
				});
			},
			onError
		);
	};

	const handlePreview = file => {
		if (!file.url) {
			return;
		}
		setPreviewImage(file.url);
		setPreviewOpen(true);
	};

	return (
		<>
			<Upload customRequest={handleUploadFile} multiple={true} onRemove={handleDelete} listType="picture-card" fileList={fileList} onPreview={handlePreview} onChange={handleChange}>
				<div>
					<UploadOutlined />
					<div style={{ marginTop: 8 }}>上传图片</div>
				</div>
			</Upload>
			<List loading={isLoading} dataSource={fileList} />
			{previewImage && (
				<Image
					wrapperStyle={{ display: "none" }}
					preview={{
						visible: previewOpen,
						onVisibleChange: visible => setPreviewOpen(visible),
						afterOpenChange: visible => !visible && setPreviewImage(""),
					}}
					src={previewImage}
				/>
			)}
		</>
	);
};

export default ImageUploader;