Skip to content

Commit

Permalink
chore: add file warning
Browse files Browse the repository at this point in the history
  • Loading branch information
YuzeTT committed Nov 16, 2023
1 parent 82a0a2b commit 4a9d574
Showing 1 changed file with 25 additions and 6 deletions.
31 changes: 25 additions & 6 deletions src/pages/tools/rseg.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,8 @@ export default function Rseg() {

const [image1, setImage1] = useState('');
const [image2, setImage2] = useState('');
const [image1Size, setImage1Size] = useState(0);
const [image2Size, setImage2Size] = useState(0);
const [image1Crop, setImage1Crop] = useState('');
const [image2Crop, setImage2Crop] = useState('');
const [bleedingLine, setBleedingLine] = useState(false);
Expand All @@ -36,7 +38,7 @@ export default function Rseg() {

const handleImage1Change = (e: ChangeEvent<HTMLInputElement>) => {
const file = e.target.files && e.target.files[0];

setImage1Size(file?.size||0)
if (file) {
const reader = new FileReader();

Expand All @@ -50,7 +52,7 @@ export default function Rseg() {
}
const handleImage2Change = (e: ChangeEvent<HTMLInputElement>) => {
const file = e.target.files && e.target.files[0];

setImage2Size(file?.size||0)
if (file) {
const reader = new FileReader();

Expand All @@ -73,6 +75,18 @@ export default function Rseg() {
setImage2Crop(cropperRef2.current?.cropper.getCroppedCanvas().toDataURL());
}
}

function formatBytes(bytes: number, decimals = 2) {
if (bytes === 0) return '0 Bytes';

const k = 1024;
const dm = decimals < 0 ? 0 : decimals;
const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'];

const i = Math.floor(Math.log(bytes) / Math.log(k));

return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
}

return (
<div>
Expand Down Expand Up @@ -102,9 +116,9 @@ export default function Rseg() {
</DrawerBody>

<DrawerFooter>
<Button variant='outline' mr={3} onClick={onClose1}>
{/* <Button variant='outline' mr={3} onClick={onClose1}>
取消
</Button>
</Button> */}
<Button colorScheme='messenger' onClick={()=>{
getCropData1()
onClose1()
Expand Down Expand Up @@ -138,9 +152,9 @@ export default function Rseg() {
</DrawerBody>

<DrawerFooter>
<Button variant='outline' mr={3} onClick={onClose2}>
{/* <Button variant='outline' mr={3} onClick={onClose2}>
取消
</Button>
</Button> */}
<Button colorScheme='messenger' onClick={()=>{
getCropData2()
onClose2()
Expand Down Expand Up @@ -178,6 +192,11 @@ export default function Rseg() {
</Button>
</label>
</div>
<div>
{image1Size+image2Size>=5120000?
<div className='text-sm text-red-500 text-center mb-2'>文件较大({formatBytes(image1Size+image2Size)}) 导出可能需要 1-3分钟</div>:''
}
</div>
<div className='mb-4'>
<table className='mx-auto'>
<tbody>
Expand Down

0 comments on commit 4a9d574

Please sign in to comment.