update pay function

This commit is contained in:
2025-11-23 22:41:16 +08:00
parent d9a169d2e0
commit 07a4cdb357

View File

@@ -73,22 +73,25 @@ const CreatePostModal = ({ isOpen, onClose, onPostCreated }) => {
// 压缩图片 // 压缩图片
const compressImage = (file) => { const compressImage = (file) => {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
// 检查文件类型
if (!file.type.startsWith('image/')) {
reject(new Error('请选择图片文件'));
return;
}
// 检查文件大小5MB 限制) // 检查文件大小5MB 限制)
if (file.size > 5 * 1024 * 1024) { if (file.size > 5 * 1024 * 1024) {
toast({ reject(new Error('图片大小不能超过 5MB'));
title: '图片过大',
description: '单张图片不能超过 5MB',
status: 'warning',
duration: 3000,
});
reject(new Error('图片过大'));
return; return;
} }
const reader = new FileReader(); const reader = new FileReader();
reader.onload = (e) => { reader.onload = (e) => {
const img = new Image(); const img = new Image();
img.onload = () => { img.onload = () => {
try {
// 创建 canvas 进行压缩 // 创建 canvas 进行压缩
const canvas = document.createElement('canvas'); const canvas = document.createElement('canvas');
let width = img.width; let width = img.width;
@@ -115,27 +118,45 @@ const CreatePostModal = ({ isOpen, onClose, onPostCreated }) => {
// 转换为 JPEG 格式,质量 0.8(压缩) // 转换为 JPEG 格式,质量 0.8(压缩)
canvas.toBlob( canvas.toBlob(
(blob) => { (blob) => {
if (!blob) {
reject(new Error('图片压缩失败'));
return;
}
const compressedReader = new FileReader(); const compressedReader = new FileReader();
compressedReader.onloadend = () => { compressedReader.onloadend = () => {
console.log( console.log(
`图片压缩: ${(file.size / 1024).toFixed(2)}KB -> ${(blob.size / 1024).toFixed(2)}KB` `图片压缩: ${(file.size / 1024).toFixed(2)}KB -> ${(blob.size / 1024).toFixed(2)}KB`
); );
resolve(compressedReader.result); resolve(compressedReader.result);
}; };
compressedReader.onerror = () => {
reject(new Error('压缩后图片读取失败'));
};
compressedReader.readAsDataURL(blob); compressedReader.readAsDataURL(blob);
}, },
'image/jpeg', 'image/jpeg',
0.8 0.8
); );
} catch (error) {
reject(new Error(`图片处理失败: ${error.message}`));
}
}; };
img.onerror = () => { img.onerror = () => {
reject(new Error('图片加载失败')); reject(new Error('图片加载失败'));
}; };
img.src = e.target.result; img.src = e.target.result;
}; };
reader.onerror = () => { reader.onerror = () => {
reject(new Error('文件读取失败')); reject(new Error('文件读取失败'));
}; };
reader.readAsDataURL(file); reader.readAsDataURL(file);
}); });
}; };
@@ -144,6 +165,9 @@ const CreatePostModal = ({ isOpen, onClose, onPostCreated }) => {
const handleImageUpload = async (e) => { const handleImageUpload = async (e) => {
const files = Array.from(e.target.files); const files = Array.from(e.target.files);
// 清空 input 以支持重复上传同一文件
e.target.value = '';
if (files.length === 0) return; if (files.length === 0) return;
// 检查总数量限制 // 检查总数量限制
@@ -157,27 +181,42 @@ const CreatePostModal = ({ isOpen, onClose, onPostCreated }) => {
return; return;
} }
try { // 逐个处理图片,而不是使用 Promise.all
// 压缩所有图片 const compressedImages = [];
const compressedImages = await Promise.all( let hasError = false;
files.map((file) => compressImage(file))
);
// 添加到表单数据 for (let i = 0; i < files.length; i++) {
try {
const compressed = await compressImage(files[i]);
compressedImages.push(compressed);
} catch (error) {
console.error('图片压缩失败:', error);
hasError = true;
toast({
title: '图片处理失败',
description: error.message || `${i + 1} 张图片处理失败`,
status: 'error',
duration: 3000,
});
break; // 遇到错误就停止
}
}
// 如果有成功压缩的图片,添加到表单
if (compressedImages.length > 0) {
setFormData((prev) => ({ setFormData((prev) => ({
...prev, ...prev,
images: [...prev.images, ...compressedImages], images: [...prev.images, ...compressedImages],
})); }));
if (!hasError) {
toast({ toast({
title: '上传成功', title: '上传成功',
description: `成功添加 ${files.length} 张图片`, description: `成功添加 ${compressedImages.length} 张图片`,
status: 'success', status: 'success',
duration: 2000, duration: 2000,
}); });
} catch (error) { }
console.error('图片上传失败:', error);
// 已经在 compressImage 中显示了具体错误
} }
}; };