All files / src/upload/_example DraggerImageUploadExample.jsx

25% Statements 7/28
33.33% Branches 4/12
20% Functions 2/10
25% Lines 7/28

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 114 115 116 117 118 119 120 121 122 123 124 125                1x 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 [image, setImage] = useState(null);
  const [status, setStatus] = useState(null);
  const [percent, setPercent] = useState(null);
 
  const xhrRef = useRef(null);
 
  function handleStart(file, { xhr }) {
    setFile(file);
    getBase64(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);
  }
 
  function getBase64(file) {
    const reader = new FileReader();
    reader.onloadend = () => {
      setImage(reader.result);
    };
    reader.readAsDataURL(file);
  }
 
  return (
    <Form.Control status={status} message="请上传 png 格式文件,大小 1MB 以内">
      <Upload
        action="//jsonplaceholder.typicode.com/posts/"
        accept="image/png"
        maxSize={1024 * 1024}
        onStart={handleStart}
        onProgress={handleProgress}
        onSuccess={handleSuccess}
        onError={handleError}
        beforeUpload={beforeUpload}
      >
        {({ open, isDragging }) => (
          <Upload.Dragger
            filename={file && file.name}
            image={image}
            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={handleAbort}
                  >
                    删除
                  </Button>
                </>
              )
            }
          >
            {isDragging ? (
              "释放鼠标"
            ) : (
              <>
                <a onClick={open}>点击上传</a>
                <Text theme="weak">/拖拽到此区域</Text>
              </>
            )}
          </Upload.Dragger>
        )}
      </Upload>
    </Form.Control>
  );
}