en-US

You can use DUpload.PictureButton to quickly implement avatar upload. This example uses dBeforeUpload to check the file format and size.

zh-CN

可使用 DUpload.PictureButton 快速实现头像上传，该示例使用 dBeforeUpload 检查文件格式和大小。

import { useState } from 'react';

import { useImmer } from '@react-devui/hooks';
import { DUpload, DToast } from '@react-devui/ui';

let key = 0;
export default function Demo() {
  const [file, setFile] = useState();
  const [toasts, setToasts] = useImmer([]);

  return (
    <>
      <DUpload
        dXHRRequest={{ url: 'https://rd-upload.free.beeceptor.com' }}
        dTrigger={
          <DUpload.PictureButton
            dFile={file}
            onRemove={() => {
              setFile(undefined);
            }}
          />
        }
        dBeforeUpload={(file) => {
          const checkType = file.type === 'image/jpeg' || file.type === 'image/png';
          if (!checkType) {
            setToasts((draft) => {
              key += 1;
              draft.push({
                key,
                visible: true,
                content: 'Only support JPG/PNG file!',
              });
            });
          }

          const checkSize = file.size / 1024 / 1024 < 2;
          if (!checkSize) {
            setToasts((draft) => {
              key += 1;
              draft.push({
                key,
                visible: true,
                content: 'Only support size that smaller than 2MB!',
              });
            });
          }

          return checkType && checkSize;
        }}
        onModelChange={(files, data) => {
          const file = data.files[0];
          if (file.status !== null) {
            setFile(file);
          }
        }}
      >
        {({ trigger }) => trigger}
      </DUpload>
      {toasts.map(({ key, visible, content }) => (
        <DToast
          key={key}
          dVisible={visible}
          dType="error"
          onClose={() => {
            setToasts((draft) => {
              draft.find((n) => n.key === key).visible = false;
            });
          }}
        >
          {content}
        </DToast>
      ))}
    </>
  );
}