mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-11 13:59:11 +08:00
51 lines
1.4 KiB
TypeScript
51 lines
1.4 KiB
TypeScript
import ImgCrop from 'antd-img-crop';
|
|
import React, { useState } from 'react';
|
|
import { Upload } from 'antd';
|
|
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
|
|
|
|
const App: React.FC = () => {
|
|
const [fileList, setFileList] = useState<UploadFile[]>([
|
|
{
|
|
uid: '-1',
|
|
name: 'image.png',
|
|
status: 'done',
|
|
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
|
|
},
|
|
]);
|
|
|
|
const onChange: UploadProps['onChange'] = ({ fileList: newFileList }) => {
|
|
setFileList(newFileList);
|
|
};
|
|
|
|
const onPreview = async (file: UploadFile) => {
|
|
let src = file.url as string;
|
|
if (!src) {
|
|
src = await new Promise((resolve) => {
|
|
const reader = new FileReader();
|
|
reader.readAsDataURL(file.originFileObj as RcFile);
|
|
reader.onload = () => resolve(reader.result as string);
|
|
});
|
|
}
|
|
const image = new Image();
|
|
image.src = src;
|
|
const imgWindow = window.open(src);
|
|
imgWindow?.document.write(image.outerHTML);
|
|
};
|
|
|
|
return (
|
|
<ImgCrop rotationSlider>
|
|
<Upload
|
|
action="https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188"
|
|
listType="picture-card"
|
|
fileList={fileList}
|
|
onChange={onChange}
|
|
onPreview={onPreview}
|
|
>
|
|
{fileList.length < 5 && '+ Upload'}
|
|
</Upload>
|
|
</ImgCrop>
|
|
);
|
|
};
|
|
|
|
export default App;
|