All files / src/upload/_example FileUploadExample.jsx

26.09% Statements 6/23
33.33% Branches 4/12
25% Functions 2/8
26.09% Lines 6/23

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>
  );
}