All files / src/upload/_example SimpleDndUploadExample.jsx

28.57% Statements 4/14
50% Branches 3/6
25% Functions 2/8
33.33% Lines 4/12

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          1x 1x                                               1x                   1x                                            
import React, { useState } from "react";
import { Upload } from "@tencent/tea-component/lib/upload";
import { Text } from "@tencent/tea-component/lib/text";
 
export default function UploadExample() {
  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}
      >
        {({ isDragging, getDraggerProps }) => (
          <div
            {...getDraggerProps({
              style: {
                height: 60,
                border: `1px dashed #ddd`,
                backgroundColor: isDragging ? "#ddd" : undefined,
              },
            })}
          >
            {uploading ? "上传中" : "拖拽到此区域"}
          </div>
        )}
      </Upload>
      {!!fileList.length && <hr />}
      {fileList.map((file, index) => (
        <p key={index}>
          <Text theme={file.status}>{file.name}</Text>
        </p>
      ))}
    </>
  );
}