update pay function
This commit is contained in:
@@ -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 中显示了具体错误
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user