Press n or j to go to the next uncovered block, b, p or k for the previous block.
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 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 | 1x 1x 1x 1x 1x 1x | import React, { useState, useRef } from "react"; import { Upload } from "@tencent/tea-component/lib/upload"; import { Text } from "@tencent/tea-component/lib/text"; import { Form } from "@tencent/tea-component/lib/form"; import { Modal } from "../../modal"; import { Button } from "../../button"; export default function SingleFileUploadExample() { const [file, setFile] = useState(null); const [status, setStatus] = useState(null); const [percent, setPercent] = useState(null); const xhrRef = useRef(null); function handleStart(file, { xhr }) { setFile(file); setStatus("validating"); xhrRef.current = xhr; } function handleProgress({ percent }) { setPercent(percent); } function handleSuccess(result) { console.log(result); setStatus("success"); } function handleError() { setStatus("error"); Modal.alert({ type: "error", message: "错误", description: "请求服务器失败", }); } function beforeUpload(file, fileList, isAccepted) { if (!isAccepted) { setStatus("error"); } return isAccepted; } function handleAbort() { if (xhrRef.current) { xhrRef.current.abort(); } setFile(null); setStatus(null); setPercent(null); } return ( <Form.Control status={status} message="请上传 zip 格式文件,大小 1MB 以内"> <Upload action="//jsonplaceholder.typicode.com/posts/" accept="application/zip,application/x-zip,application/x-zip-compressed" maxSize={1024 * 1024} onStart={handleStart} onProgress={handleProgress} onSuccess={handleSuccess} onError={handleError} beforeUpload={beforeUpload} > {({ open, isDragging }) => ( <Upload.Dragger filename={file && file.name} percent={percent} description={ file && ( <> <p>文件大小:{Math.floor(file.size / 1024)}K</p> <p>上传日期:-</p> </> ) } button={ status === "validating" ? ( <Button type="link" onClick={handleAbort}> 取消上传 </Button> ) : ( <> <Button type="link" onClick={open}> 重新上传 </Button> <Button type="link" style={{ marginLeft: 8 }} onClick={() => setFile(null)} > 删除 </Button> </> ) } > {isDragging ? ( "释放鼠标" ) : ( <> <a onClick={open}>点击上传</a> <Text theme="weak">/拖拽到此区域</Text> </> )} </Upload.Dragger> )} </Upload> </Form.Control> ); } |