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 | 1x 1x 1x 1x | import React, { useState } from "react"; import { Upload } from "@tencent/tea-component/lib/upload"; import { Text } from "@tencent/tea-component/lib/text"; export default function UploadExample() { const [fileList, setFileList] = useState([]); const [uploading, setUploading] = useState(null); function handleStart() { setUploading(true); } function handleSuccess(result, { file }) { setFileList(fileList => [ ...fileList, { name: file.name, status: "success" }, ]); setUploading(false); console.log(result); } function handleError(error, { file }) { setFileList(fileList => [ ...fileList, { name: file.name, status: "danger" }, ]); setUploading(false); console.error(error); } return ( <> <Upload action="//jsonplaceholder.typicode.com/posts/" multiple onStart={handleStart} onSuccess={handleSuccess} onError={handleError} > {({ isDragging, getDraggerProps }) => ( <div {...getDraggerProps({ style: { height: 60, border: `1px dashed #ddd`, backgroundColor: isDragging ? "#ddd" : undefined, }, })} > {uploading ? "上传中" : "拖拽到此区域"} </div> )} </Upload> {!!fileList.length && <hr />} {fileList.map((file, index) => ( <p key={index}> <Text theme={file.status}>{file.name}</Text> </p> ))} </> ); } |