All files / src/upload/_example ImageUploadExample.jsx

25% Statements 7/28
37.5% Branches 6/16
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                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 }) => (
          <Upload.Image
            filename={file ? file.name : <Text theme="weak">还未选择图片</Text>}
            image={
              file
                ? image
                : "//imgcache.qq.com/open_proj/proj_qcloud_v2/tea-style/dist/assets/image/upload-thumb.png"
            }
            percent={percent}
            description={
              file && (
                <>
                  <p>文件大小:{Math.floor(file.size / 1024)}K</p>
                  <p>上传日期:-</p>
                </>
              )
            }
            button={
              status === "validating" ? (
                <Button onClick={handleAbort}>取消上传</Button>
              ) : (
                <>
                  <Button onClick={open}>
                    {status ? "重新上传" : "选择图片"}
                  </Button>
                  {file && (
                    <Button
                      type="link"
                      style={{ marginLeft: 8 }}
                      onClick={handleAbort}
                    >
                      删除
                    </Button>
                  )}
                </>
              )
            }
          />
        )}
      </Upload>
    </Form.Control>
  );
}