React Suite 上传器组件

React Suite 是一个优秀的 React UI 组件库，其中包含了丰富的组件，包括上传器组件。上传器组件提供了文件上传功能，并支持自定义请求参数、上传前校验、上传进度提示等功能。

安装

通过 npm 安装 React Suite：

npm install rsuite

使用

使用上传器组件之前，首先需要在项目中引入 React Suite 和样式文件：

import React from 'react';
import ReactDOM from 'react-dom';
import 'rsuite/dist/styles/rsuite-default.css';
import { Uploader } from 'rsuite';

在需要使用上传器组件的地方，放置 Uploader 组件即可：

function App() {
  return (
    <Uploader action="/api/upload">
      {/* 这里放置上传按钮 */}
    </Uploader>
  );
}

在 action 属性中指定上传文件的地址，即可完成简单的上传功能。

自定义参数

如果需要在上传文件的同时发送其他参数到后台处理，可以通过 requestParams 属性来设置：

function App() {
  return (
    <Uploader action="/api/upload"
      requestParams={{ userId: 123 }}>
      {/* 这里放置上传按钮 */}
    </Uploader>
  );
}

校验文件

在上传文件之前，可以通过 beforeUpload 属性进行校验。beforeUpload 属性接收一个函数，该函数需要返回一个 Promise 对象，校验通过时需要 resolve，校验失败时需要 reject。

function App() {
  return (
    <Uploader
      action="/api/upload"
      beforeUpload={file => {
        return new Promise((resolve, reject) => {
          if (file.type !== 'image/png') {
            reject('只能上传 png 格式的图片');
          } else if (file.size > 1024 * 1024 * 2) {
            reject('不能上传超过 2 MB 的图片');
          } else {
            resolve();
          }
        });
      }}
    >
      {/* 这里放置上传按钮 */}
    </Uploader>
  );
}

上传进度

通过 onChange 属性可以监听上传进度：

function App() {
  return (
    <Uploader
      action="/api/upload"
      onChange={progress => {
        console.log(progress);
        /*
        {
          percent: 0.5,  // 上传进度，0 ~ 1 之间的浮点数
          loaded: 256 * 1024,  // 已上传的字节数
          total: 512 * 1024  // 总字节数
        }
        */
      }}
    >
      {/* 这里放置上传按钮 */}
    </Uploader>
  );
}

完成处理

通过 onSuccess 和 onError 属性可以分别监听成功上传和上传失败的事件：

function App() {
  return (
    <Uploader
      action="/api/upload"
      onSuccess={(response, file) => {
        console.log(`上传成功：${response}`);
      }}
      onError={(error, file) => {
        console.log(`上传失败：${error.message}`);
      }}
    >
      {/* 这里放置上传按钮 */}
    </Uploader>
  );
}

以上就是 React Suite 上传器组件的基本使用方法，更多细节和定制请查阅官方文档。