mirror of https://github.com/fantasticit/think.git
feat: resolve image size
parent
ffd8041046
commit
28f7c21b54
|
@ -52,3 +52,16 @@ export const normalizeFileType = (fileType): FileType => {
|
|||
|
||||
return 'file';
|
||||
};
|
||||
|
||||
export const getImageWidthHeight = (url: string): Promise<{ width: number | string; height: number | string }> => {
|
||||
return new Promise((resolve) => {
|
||||
const img = document.createElement('img');
|
||||
img.onload = () => {
|
||||
resolve({ width: img.width, height: img.height });
|
||||
};
|
||||
img.onerror = () => {
|
||||
resolve({ width: 'auto', height: 'auto' });
|
||||
};
|
||||
img.src = url;
|
||||
});
|
||||
};
|
||||
|
|
|
@ -6,8 +6,4 @@
|
|||
border-radius: var(--border-radius);
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid var(--semi-color-link);
|
||||
}
|
||||
}
|
||||
|
|
|
@ -5,7 +5,7 @@ import cls from 'classnames';
|
|||
import { Typography, Spin } from '@douyinfe/semi-ui';
|
||||
import { useToggle } from 'hooks/use-toggle';
|
||||
import { uploadFile } from 'services/file';
|
||||
import { extractFileExtension, extractFilename } from '../../services/file';
|
||||
import { extractFileExtension, extractFilename, getImageWidthHeight } from '../../services/file';
|
||||
import styles from './index.module.scss';
|
||||
|
||||
const { Text } = Typography;
|
||||
|
@ -36,7 +36,8 @@ export const ImageWrapper = ({ editor, node, updateAttributes }) => {
|
|||
toggleLoading(true);
|
||||
try {
|
||||
const src = await uploadFile(file);
|
||||
updateAttributes({ ...fileInfo, src });
|
||||
const size = await getImageWidthHeight(file);
|
||||
updateAttributes({ ...fileInfo, ...size, src });
|
||||
toggleLoading(false);
|
||||
} catch (error) {
|
||||
updateAttributes({ error: '图片上传失败:' + (error && error.message) || '未知错误' });
|
||||
|
|
Loading…
Reference in New Issue