jialin
1 year ago
parent
a5cebb88ef
commit
af077c4706
@ -1,34 +1,41 @@
|
||||
import { CloseCircleOutlined } from '@ant-design/icons';
|
||||
import { Space } from 'antd';
|
||||
import { Image } from 'antd';
|
||||
import _ from 'lodash';
|
||||
import React from 'react';
|
||||
import React, { useCallback } from 'react';
|
||||
import '../style/thumb-img.less';
|
||||
|
||||
const ThumbImg: React.FC<{
|
||||
dataList: any[];
|
||||
onDelete: (uid: number) => void;
|
||||
}> = ({ dataList, onDelete }) => {
|
||||
const handleOnDelete = (uid: number) => {
|
||||
onDelete(uid);
|
||||
};
|
||||
const handleOnDelete = useCallback(
|
||||
(uid: number) => {
|
||||
onDelete(uid);
|
||||
},
|
||||
[onDelete]
|
||||
);
|
||||
|
||||
if (_.isEmpty(dataList)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<Space wrap size={10} className="thumb-list-wrap">
|
||||
<div className="thumb-list-wrap">
|
||||
{_.map(dataList, (item: any) => {
|
||||
return (
|
||||
<span key={item.uid} className="thumb-img">
|
||||
<span
|
||||
style={{ backgroundImage: `url(${item.dataUrl})` }}
|
||||
className="img"
|
||||
></span>
|
||||
<span className="img">
|
||||
<Image src={item.dataUrl} width={56} height={56} />
|
||||
</span>
|
||||
|
||||
<span className="del" onClick={() => handleOnDelete(item.uid)}>
|
||||
<CloseCircleOutlined />
|
||||
</span>
|
||||
</span>
|
||||
);
|
||||
})}
|
||||
</Space>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default ThumbImg;
|
||||
export default React.memo(ThumbImg);
|
||||
|
||||
@ -0,0 +1,85 @@
|
||||
import { FileImageOutlined } from '@ant-design/icons';
|
||||
import { useIntl } from '@umijs/max';
|
||||
import { Button, Tooltip, Upload } from 'antd';
|
||||
import type { UploadFile } from 'antd/es/upload';
|
||||
import { RcFile } from 'antd/es/upload';
|
||||
import { debounce } from 'lodash';
|
||||
import React, { useCallback, useRef } from 'react';
|
||||
|
||||
interface UploadImgProps {
|
||||
handleUpdateImgList: (
|
||||
imgList: { dataUrl: string; uid: number | string }[]
|
||||
) => void;
|
||||
}
|
||||
|
||||
const UploadImg: React.FC<UploadImgProps> = ({ handleUpdateImgList }) => {
|
||||
const intl = useIntl();
|
||||
const uploadRef = useRef<any>(null);
|
||||
|
||||
const getBase64 = (file: RcFile): Promise<string> => {
|
||||
return new Promise((resolve, reject) => {
|
||||
const reader = new FileReader();
|
||||
reader.readAsDataURL(file);
|
||||
reader.onload = () => resolve(reader.result as string);
|
||||
reader.onerror = (error) => reject(error);
|
||||
});
|
||||
};
|
||||
|
||||
const debouncedUpdate = useCallback(
|
||||
debounce((base64List: { dataUrl: string; uid: number | string }[]) => {
|
||||
handleUpdateImgList(base64List);
|
||||
}, 300),
|
||||
[handleUpdateImgList, intl]
|
||||
);
|
||||
|
||||
const handleChange = async (info: any) => {
|
||||
const { fileList } = info;
|
||||
|
||||
const newFileList = await Promise.all(
|
||||
fileList.map(async (item: UploadFile) => {
|
||||
if (item.originFileObj && !item.url) {
|
||||
const base64 = await getBase64(item.originFileObj as RcFile);
|
||||
item.url = base64;
|
||||
}
|
||||
return item;
|
||||
})
|
||||
);
|
||||
|
||||
if (newFileList.length > 0) {
|
||||
const base64List = newFileList
|
||||
.filter((sitem) => sitem.url)
|
||||
.map((item: UploadFile) => {
|
||||
return {
|
||||
dataUrl: item.url as string,
|
||||
uid: item.uid
|
||||
};
|
||||
});
|
||||
|
||||
debouncedUpdate(base64List);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<Upload
|
||||
ref={uploadRef}
|
||||
accept="image/*"
|
||||
multiple
|
||||
action="/"
|
||||
fileList={[]}
|
||||
beforeUpload={(file) => false}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<Tooltip title={intl.formatMessage({ id: 'playground.img.upload' })}>
|
||||
<Button
|
||||
size="small"
|
||||
type="text"
|
||||
icon={<FileImageOutlined />}
|
||||
></Button>
|
||||
</Tooltip>
|
||||
</Upload>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default React.memo(UploadImg);
|
||||
Loading…
Reference in new issue