File size: 1,567 Bytes
6b8fc2c fad2ec7 6b8fc2c |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
import React, { useEffect, useState } from 'react';
import { UploadOutlined } from '@ant-design/icons';
import { Button, Upload } from 'antd';
import type { UploadFile } from 'antd/es/upload/interface';
const App: React.FC = () => {
const [fileList, setFileList] = useState([{
uid: '0',
name: 'xxx.png',
status: 'uploading',
percent: 10,
}])
const obj = {
uid: '-1',
name: 'yyy.png',
status: 'done',
url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
thumbUrl: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
}
useEffect(() => {
const timer = setInterval(() => {
setFileList((fileList: any) => {
const percent = fileList[0]?.percent
if (percent + 10 >= 100) {
clearInterval(timer)
return [obj]
}
const list = [{ ...fileList[0], percent: percent + 10 }]
console.log(list)
return list
})
}, 300)
}, [])
return (
<>
<Upload
action="https://run.mocky.io/v3/435e224c-44fb-4773-9faf-380c5e6a2188"
listType="picture"
fileList={[...fileList]}
multiple
>
<Button icon={<UploadOutlined />}>Upload</Button>
</Upload>
</>
)
};
export default App; |