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 | 1x 1x 1x 1x 1x 1x | import React, { useState, useRef } from "react"; import { Upload } from "@tencent/tea-component/lib/upload"; import { Button } from "@tencent/tea-component/lib/button"; import { Form } from "@tencent/tea-component/lib/form"; import { Modal } from "@tencent/tea-component/lib/modal"; export default function UploadExample() { 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"); handleAbort(); 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="请上传 png 格式文件,大小 100KB 以内" > <Upload action="//jsonplaceholder.typicode.com/posts/" accept="image/png" maxSize={100 * 1024} onStart={handleStart} onProgress={handleProgress} onSuccess={handleSuccess} onError={handleError} beforeUpload={beforeUpload} > {({ open }) => ( <Upload.File filename={file && file.name} percent={percent} button={ status === "validating" ? ( <Button onClick={handleAbort}>取消上传</Button> ) : ( <> <Button onClick={open}> {status ? "重新上传" : "选择文件"} </Button> {status && ( <Button type="link" style={{ marginLeft: 8 }} onClick={handleAbort} > 删除 </Button> )} </> ) } /> )} </Upload> </Form.Control> ); } |