react-chunk-upload v1.1.3

文件分片上传

使用函数

获取上传文件的hash值(md5值)

import { hashFile } from 'react-chunk-upload';
const hash = await hashFile(file); 

文件分片

import { blobSlice } from 'react-chunk-upload'
const fileChunk = blobSlice(startByte, endByte);

使用组件

import { ChunksUpload } from 'react-chunk-upload';

参数说明

/**
 *
 * @param reqUrl（必选）
 * 相关接口地址:
 *   三个接口依次执行(此处使用axios发起网络请求)
 *   beforeUploadCheckAPI: 用于校验文件，实现断点续传；
 *     method: GET
 *     request params: {
 *       md5: string  // 文件的md5值
 *     }
 *     response example: {
 *       status: 200, // 状态码为200时才会执行分片上传
 *       data: {
 *         uploadedChunks: number[]
 *       }  // uploadedChunks表示已经上传的分片索引，从1开始（即分片上传接口中的请求参数chunks）
 *       ...
 *     }
 *   chunkUploadAPI: 分片上传；
 *     method: POST
 *     Content-Type: multipart/form-data
 *     request params: {
 *       file: (binary),   // 文件
 *       fileName: string, // 文件名
 *       chunks: number,   // 总片数
 *       chunk: number,    // 当前片的索引，从1开始
 *       size: number,     // 总文件大小
 *       md5: string,      // 总文件的md5
 *     }
 *   mergeChunksAPI:分片完成后合并文件
 *     当响应状态status为200时表示上传且合并文件成功
 * @param size（可选）
 * 分片大小（单位兆-M）
 * @param type（可选）
 * 允许上传的类型(['.png', ...])
 * @param setStatus（可选）
 * 设置当前状态
 *   1：文件类型错误；
 *   2：分片中；
 *   3：分片完成，正在校验文件；
 *   4：校验失败；
 *   5：上传失败；
 *   6：上传成功； 
 *   7: 文件读取失败
 * @param setPercent（可选）
 * 文件上传进度（0-100）
 *
 */

  // 进度
  const [percent, setPercent] = useState<number>();
  // 状态
  const [status, setStatus] = useState<number>();
  return (
    <div className="App">
      <ChunksUpload 
        reqUrl={{beforeUploadCheckAPI: 'aa', chunkUploadAPI: 'bb', mergeChunksAPI: 'cc'}}
        type={['.png']}
        setPercent={setPercent}
        setStatus={setStatus}
      >
        <Button type='primary'>点击上传</Button> // --props.children
      </ChunksUpload>
  )