antd-mobile-upload

antd-mobile-upload

项目介绍

基于 rc-upload 和 antd-mobile 的上传组件

软件架构

适用于 dva 和 umi 项目

安装教程

yarn add antd-mobile-upload

或者

npm i -S antd-mobile-upload

使用说明

文件上传示例

import React, { PureComponent } from 'react';
import Upload from 'antd-mobile-upload';

export default class PageUpload extends PureComponent {

  render () {
    return (
      <Upload multiple action={'/api/upload'} />
    );
  }
}

图片上传示例

import React, { PureComponent } from 'react';
import ImageUpload from 'antd-mobile-upload/lib/ImageUpload';

export default class PageUpload extends PureComponent {

  render () {
    return (
      <ImageUpload multiple action={'/api/upload'} />
    );
  }
}

API

import PT from 'prop-types';

const Upload = {
  //  原 rc-upload 属性
  component: PT.string,
  style: PT.object,
  prefixCls: PT.string,
  action: PT.oneOfType([PT.string, PT.func]),
  name: PT.string,
  multipart: PT.bool,
  directory: PT.bool,
  onError: PT.func,
  onSuccess: PT.func,
  onProgress: PT.func,
  onStart: PT.func,
  data: PT.oneOfType([PT.object, PT.func]),
  headers: PT.object,
  accept: PT.string,
  multiple: PT.bool,
  disabled: PT.bool,
  beforeUpload: PT.func,
  customRequest: PT.func,
  onReady: PT.func,
  withCredentials: PT.bool,
  supportServerRender: PT.bool,
  openFileDialogOnClick: PT.bool,

  // upload 补充属性
  files: PT.arrayOf(PT.object).isRequired,  // 当前文件列表
  size: PT.number,                          // 单个文件大小
  limit: PT.number,                         // 文件上传数量
  onRemove: PT.func,                        // 移除文件回调
  onClickFile: PT.func,                     // 点击文件回调
  onComplete: PT.func,                      // 上传完成回调
  getSuccessFileUrl: PT.func,               // 定义获取上传成功文件的url函数

  renderFilesContainer: PT.func,            // 文件列表容器组件
  renderFileUploaded: PT.func,              // 已上传文件组件
  renderFileUpload: PT.func,                // 上传触发组件
};

export default Upload;