引入 calculateNameWorker.js

以 iife 的方式引入公共的 js

<script src="/calculateNameWorker.js"></script>

但是上述的js 到哪里找呢, 点击这里

• 如果项目中不引入上述 js 的话，项目不会任何异常，但是功能秒传/ 断点续传 的功能就无法实现了
• 如果您的项目部署在某个二级文件夹下, 而不是部署到 nginx 根目录下，您可以设置如下代码(一定要在导入calculateNameWorker.js 之前执行)：

<script>(window.uploadJdk = {}).publicPath = "/factory";</script>

导出核心方法 uploadHandler

// index.vue
import {uploadHandler} from "upload-file-jdk";

// 修改配置
uploadHandler.config({xxx});

// 一旦上传文件后，将file 给予这个方法中
uploadHandler(xx).then(rs => {
    const [修改后的文件名称, 原文件名称] = rs;
});

使用核心的 hooks

Vue 版本

将文件 useBigFileUploadForVue.ts(点击这里) 复制到项目的 hooks 中，可以直接使用

const [allProgress, cancelProgressHandler, pauseProgressHandler] =
    useBigFileUploadForVue(false);

• sortFlag 默认是true. 排序的状态: true 向后添加 向前添加

• allProgress 所有的上传文件的信息

• cancelProgressHandler 点击取消触发的事件

• pauseProgressHandler 暂停需要触发的事件

React 版本

实现中

搭配后端周边

搭配 springboot 中间件

可以参照 springboot 中间件 案例

深入理解 Hook

虽然我们已经提供了 upload-file-jdk插件, 但是为了更好的完成功能，我们这里也提供了Hook 组件

const [allProgress, cancelProgressHandler, pauseProgressHandler] =
    useBigFileUploadForVue();

• allProgress 所有的上传文件的信息
• cancelProgressHandler 点击取消触发的事件
  • 此方法的参数就是： uniqueCode
• pauseProgressHandler 暂停需要触发的事件
  • 此方法的参数就是： uniqueCode

其实针对属性allProgress: Array<QueueElementBaseExtend> 我们提供了更多的属性，基本可以满足业务需求.

export type QueueElementBaseExtend = Required<
    QueueElementBase & {
    stateDesc: string;
    downSize: number;
}
>;

type QueueElementBase = Partial<{
    // 表示上传类型, 例如: 上传/ 暂停/ 完成等状态
    type: UploadProgressState;
    // 每个文件都有相同的 code
    uniqueCode: string;
    // 上传文件的大小
    fileSize: number;
    // 已经上传的进度
    progress: number;
    // 当前上传的网速
    networkSpeed: number;
    // 上传文件名称
    fileName: string;
    // 上传的文件
    uploadFile: File;
    // 重试次数
    retryTimes: number;
    // 请求错误的信息
    requestErrorMsg: string;
}>;

/* 进度状态 */
export enum UploadProgressState {
    // 准备中 计算唯一的hash码
    Prepare = "Prepare",
    // hash 计算等待中
    HashCalculationWaiting = "HashCalculationWaiting",
    // 上传等待中 目的是为了并发控制
    Waiting = "Waiting",
    // 上传中
    Uploading = "Uploading",
    // 表示合并文件中
    Merge = "Merge",
    // 上传完成
    Done = "Done",
    // 秒传
    QuickUpload = "QuickUpload",
    // 断点 续传
    BreakPointUpload = "BreakPointUpload",
    // 表示 其他相同元素上传中
    OtherUploading = "OtherUploading",
    // 暂停 状态
    Pause = "Pause",
    // 暂停 重试
    PauseRetry = "PauseRetry",
    // 被 取消状态
    Canceled = "Canceled",
    // 请求错误
    RequestError = "RequestError",
    // 重试状态
    Retry = "Retry",
    // 网络失联
    NetworkDisconnected = "NetworkDisconnected",
    // 重试失败
    RetryFailed = "RetryFailed",
    // 刷新重试
    RefreshRetry = "RefreshRetry",
}

实际案例的 Demo

• 前端Vue demo
• 后端 demo
  • Java 版本
  • Node 版本