react-large-uploader

React component for uploading large file

Installation

请安装最新版本

npm install react-large-uploader --save
or
yarn add react-large-uploader

Introduction

由于上传大文件的时候，服务器会有大小的限制，所以前端在上传大文件的时候需要切割上传。此组件支持大文件自动切割并发上传，失败自动继续上传，不刷新页面的端点续传，多文件上传。实现了基本 UI，进度条，状态，继续上传等交互。如果对 UI 没什么要求... 是可以直接拿过去用的。

基于 webuploader 中 html5 处理大文件的功能，对兼容性没有做测试，现代浏览器应该都是兼容的。另外，webuploader 是严重依赖 jquery的。但是我在它的官网看到了有 jquery 的替代品，以为很好就拿过来开发了，然而找了半天没有找到。webuploader 还没有去除对 jquery 的依赖，所以安装的时候会依赖 jq... 强迫症，所以在本来就有 jq 的老项目，我还是忍了...

Example

组件使用：

import LargeUploader from 'react-larger-uploader';
import 'react-larger-uploader/lib/css';

const options = {
  resize: false,
  auto: true,
  server: '/upload',
};
return (
  <LargeUploader
    options={options}
    border={false}
    width={300}
    onChange={(file) => console.log(file)}
  >
    <div>选择</div>
  </LargeUploader>
);

只需要几个参数就可以完成创建。

另外 example 目录中，还写了一个简单的接收文件的 server，没有做切片合并的处理，在根目录下的 start.js。

Usage

参数

• options {object}

  初始化 webuploader 的配置对象，可以参照 webuploader。

  // 默认
  {
    server: '/upload', // request url
    auto: false,  // 添加完文件是否自动上传
    chunked: true,  // 是否切割
    chunkSize: 5 * 1024 * 1024,  // 切片大小
    chunkRetry: 3,  // 切片上传失败重试次数
    threads: 1, // 并发数量
    fileSizeLimit: 2000 * 1024 * 1024,  // 文件总大小的限制，超出则先不加入队列
    fileSingleSizeLimit: 2000 * 1024 * 1024,  // 单个文件的大小限制，超出不加入队列
   }
    

• width {int}

  默认 300 区域的大小，为了能更好的展示文件名，进度条，300 是最小的宽度了。

• border {bool}

  是否显示边框

• name {string}

  defaultValue： 'file'

• onChange(file, fileList) {function}

  当文件上传成功、失败或者删除文件的时候调用。第一个参数是 file 对象，具体包括：

  {
    ext:  //后缀名
    id: //文件id
    md5Val: // 整个文件的md5 值，用于后端识别文件。
    lastModifiedDate: //最后修改时间
    name:  //文件名
    size:  //文件大小
    percentage:  //百分百 0.5
    source:  //源
    uploadStatus:  //状态(成功/失败)
    type:  //mime 类型
    response: // 上传成功后，服务器返回的 value
    error: // 出错的原因， 'server'
  }
  

  第二个参数为当前的 fileList 数组。

• beforeFileQueued(file) {function}

  return: true or false

  文件加入队列之前的回调，可以在这里做文件的校验，拦截。WebUploader 已经帮我们处理了比如文件为空，文件格式不对的，但是没有交互信息。当我们需要把这些信息反馈给用户时，可以在这里做。 返回 true，文件加入队列。 返回 false，文件不加入。

  const beforeFileQueued = (file) => {
    if (file.size === 0) {
      alert('不能上传空文件~');
      return false;
    }
    if (file.ext !== 'csv') {
      alert('文件格式有误~');
      return false;
    }
    return true;
  }

• fillDataBeforeSend {function}

  return: object

  自定义参数

  用于 uploader 自动发送请求之前，填充 data 对象。此函数返回的对象中数据，都会被 merge 到最终发送的 data 中。不过要注意默认的 key-name，不能和默认的 query 冲突，否则会被覆盖。

• uploadResponse(file, res) {function}

  return: true/false

  注册上传操作收到 response 的函数，用于判断是否上传成功。默认是上传返回状态码 200 就认为成功，传入这个函数可以对返回值信息做验证。接收两个参数，1. 当前的 file 文件 2. 接口 response

  此函数的返回值，true 表示成功，false 表示失败。

  eg:

  uploadResponse: (file, res) => {
    const { code } = res;
    return code === 0;
  }

query

默认传给服务器的信息包括：

• chunks 切片数量
• chunk 当前序号，从 0 开始
• md5Value 文件的 md5 值，区分文件，合并的唯一标示
• id 同一批次上传的文件的序号，没啥用
• filename 文件名
• size 切片、文件大小