一、安装

yarn add file-block-upload

npm install file-block-upload --save

二、示例

  import FileUpload from 'file-block-upload';

  const upload = file => {
    file.uid = "u101";
  
    const options = {
      threads: 10,
      extras: { id: 101},
      checkFile: async ({fileName, fileMd5, fileSize}: any) => {
        const result: {success: boolean, message: string, data: any } = await post('api/checkFile', { fileName, fileMd5, fileSize });
        return result
      }, 
      checkBlock: "api/checkBlock",
      uploadBlock: "api/uploadBlock",
  
      mergeBlock: "api/mergeBlock",
      mergeProgress: "api/mergeProgress",
  
      verifyFile: "api/verifyFile",
      verifyProgress: "api/verifyProgress",
    }
  
    const upload = FileUpload.create(options);
    upload.progress((file, progress) => {
      console.log(file, progress);
    });
    upload.complete(file => {
      console.log(file.response);
    });
    upload.error((file, error)=> {
      console.log(file.name, error);
    });
    upload.start(file);
  }

三、options 参数说明

属性

| 名称 | 说明 | 类型 | 默认值 | | ----------- | -------------------- | ------- | ------ | | threads | 同时上传并发数量 | number | 5 | | blockSize | 文件分片大小 | number | 10M | | blockRetry | 上传出错，重试次数 | number | 3 | | extras | 额外扩展字段 | object | - |

请求

| 名称 | 参数 | 说明 | 默认值 | | ----------- | -------------------- | ------- | ------- | | checkFile | false 丨 string 丨 (CheckFile) => Promise<boolean> | 类型为string时，表示使用POST请求的url地址；类型为function时，自定义检查上传文件方法； | false | | checkBlock | false 丨 string 丨 (CheckBlock) => Promise<boolean> | 类型为string时，表示使用POST请求的url地址；类型为function时，自定义检查当前上传分片； | false | | uploadBlock | false 丨 string 丨 (UploadBlock) => Promise<void> | 类型为string时，表示使用POST请求的url地址；类型为function时，自定义上传分片； | false | | mergeBlock | false 丨 string 丨 ({fileName, fileMd5}) => Promise<any> | 类型为string时，表示使用POST请求的url地址；类型为function时，自定义检查合并分片； | false | | mergeProgress | false 丨 string 丨 () => Promise<number> | 类型为string时，表示使用GET请求的url地址；类型为function时，自定义返回合并进度； | false | | verifyFile | false 丨 string 丨 ({fileName, fileMd5}) => Promise<any> | 类型为string时，表示使用POST请求的url地址；类型为function时，自定义验证文件； | false | | verifyProgress | false 丨 string 丨 () => Promise<number> | 类型为string时，表示使用GET请求的url地址；类型为function时，自定义返回验证进度； | false |

方法

| 名称 | 参数 | 说明 | | ----------- | -------------------- | ------- | | progress | number | 整体进度 |
| complete | file | 文件上传完成 |
| error | Exception | 捕获上传异常 |
| start | file | 开始上传文件 |

参数

CheckFile

| 参数 | 类型 | 说明 | | ---- | ------ | ------------------------------------------- | | fileName | string | 文件名称 | | fileMd5 | string | 文件 MD5 HEX | | fileSize | number | 文件大小 |

CheckBlock

| 参数 | 类型 | 说明 | | ---- | ------ | ------------------------------------------- | | fileName | string | 文件名称 | | fileMd5 | string | 文件 MD5 HEX | | blockMd5 | number | 文件分片 MD5 HEX | | blockIndex | number | 文件分片索引 |

UploadBlock

| 参数 | 类型 | 说明 | | ---- | ------ | ------------------------------------------- | | fileName | string | 文件名称 | | fileMd5 | string | 文件 MD5 HEX | | blockMd5 | number | 文件分片 MD5 HEX | | blockIndex | number | 文件分片索引 | | file | Blod | 分片文件二进制对象 |