@99xt/react-fileupload 中文文档教程

Question

@99xt/react-fileupload

更简单的 react.js 应用程序文件上传实现。

Installation

要安装此库，请运行：

npm install @99xt/react-fileupload --save

Usage

example.component.js

import React, {Component} from 'react';
import FileUpload from '@99xt/react-fileupload';

class ExampleApp extends Component {
  onUploadFiles(evt) {
    if (evt.error) {
        throw evt.error;
    }

    const files = evt.files;
    // You can run upload script here
    console.log(files);
  }

  render() {
    const allowedTypes = [];
    const allowedSize = 15; // MB
    const multiple = true;

    return (
      <div>
        <h1>react-fileupload Demo</h1>

        { /* with default UI */ }
        <FileUpload
          allowedTypes={ allowedTypes }
          allowedSize={ allowedSize }
          multiple={ multiple }
          onUploadFiles={ this.onUploadFiles }
        />

      { /* with custom UI */ }
      <FileUpload
          allowedTypes={allowedTypes}
          allowedSize={allowedSize}
          multiple={multiple}
          onUploadFiles={this.onUploadFiles}
          renderUI={props => {
            const { status } = props;
            return (
              <div style={{ border: "2px dashed #ccc", padding: "50px" }}>
                <p>Click or drag n drop your file(s) here.</p>
                <p>Drag n drop status: {status}</p>
              </div>
            );
          }}
        />
      </div>
    );
  }
}

Contributing Guide

Setting up the development environment

将存储库克隆到您的工作站

git clone git@github.com:99xt/react-fileupload.git

导航到项目目录

cd react-fileupload

npm install
npm run build

使用npm run clean 删除构建的资源。

Run Demo app

npm start

演示应用程序将启动 http://localhost:3000

Publish to NPM

更新 package.json 中的版本；

npm publish

License

麻省理工学院