添加图片直接上传到OSS功能
Ycc
3 months ago
parent
f87e4a0b36
commit
527e923b5b
@ -0,0 +1,179 @@
|
||||
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;
|
||||
Loading…
Reference in New Issue