@beisen-phoenix/upload-button-block

上传组件

功能参数说明

上传功能的实现结合 @reacted/use-file-upload 来实现， 此组件只负责展示UI

UI参数

err?: boolean 当传递的err为true时，上传框会显示成一种五颜六色的红色。

text?: string 提示文本的值，如果不传则显示为 上传

onClick 点击时的回调

extraCls?: string 自定义组件容器class,一般用于覆盖组件默认样式使用

disabled?: boolean 是否禁用

示例代码

import React, { useState, useCallback } from 'react';
import UploadBlock from '../../src/index';
import useFileSelect, { msgType } from '@reacted/use-file-select';

export default function Supers() {
  let [error, setError] = useState(false);

  const handleError = msg => {
    if (msg.type === msgType.overLimit) console.log('文件个数超出上限');
    if (msg.type === msgType.overSize) console.log('文件大小超出上限');
  };

  const handleFileSelect = useCallback(
    files => {
      if (error) {
        setError(false);
      }
      console.log(files);
    },
    [error]
  );

  let [input, handleClick] = useFileSelect({
    onError: handleError,
    onSelect: handleFileSelect,
    multiple: true,
    limit: 3,
    sizeLimit: 0.0015
  });

  return (
    <div>
      <UploadBlock err={error} onClick={handleClick} text="上传" />
      {input}
    </div>
  );
}

多语言

参数	说明	类型	默认值
translation	语言包 用于翻译组件内置常量	{upload: string}	{upload: '上传'}