All files / src/upload/_example DraggerUploadExample.jsx

26.09% Statements 6/23
33.33% Branches 4/12
22.22% Functions 2/9
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 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>
  );
}