All files / src/upload/_example UploadExample.jsx

23.08% Statements 3/13
50% Branches 1/2
14.29% Functions 1/7
27.27% Lines 3/11

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            1x 1x                                               1x                                        
import React, { useState } from "react";
import { Upload } from "@tencent/tea-component/lib/upload";
import { Button } from "@tencent/tea-component/lib/button";
import { Text } from "@tencent/tea-component/lib/text";
 
export default function SingleFileUploadExample() {
  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}
      >
        <Button loading={uploading}>点击上传</Button>
      </Upload>
      {!!fileList.length && <hr />}
      {fileList.map((file, index) => (
        <p key={index}>
          <Text theme={file.status}>{file.name}</Text>
        </p>
      ))}
    </>
  );
}