媒资断点续传 - 微信小程序 SDK

1、 安装

# 方式一：npm/pnpm/yarn 安装
npm install @zegoweb/wx-upload -S
# 方式二：本地SDK包，接入使用

2、使用

// ES6
const token = "zego-token";
const apiPrefix = "zego-apiPrefix";
import { WXUpload } from "@zegoweb/wx-upload";
const uploader = new WXUpload(
  { token, apiPrefix },
  { chunkSize: 1024 * 1024 * 5 }
);

// UMD
const token = "zego-token";
const apiPrefix = "zego-apiPrefix";
const { WXUpload } = require("@zegoweb/wx-upload");
const uploader = new WXUpload(
  { token, apiPrefix },
  { chunkSize: 1024 * 1024 * 5 }
);

3、错误码

• 协议层：(常见)

  | 错误码 | 错误信息 | | ------ | ----------------- | | 400 | 请求错误 | | 401 | 未授权，请登录 | | 403 | 拒绝访问 | | 404 | 请求地址出错 | | 408 | 请求超时 | | 500 | 服务器内部错误 | | 501 | 服务未实现 | | 502 | 网关错误 | | 503 | 服务不可用 | | 504 | 网关超时 | | 505 | HTTP 版本不受支持 |

• 业务层：(常见)

  | 错误码 | 错误信息 | | ------ | ---------------- | | -1 | 网络异常 | | -2 | 网络超时 | | -3 | 请求失败 | | -100xx | 后端其它错误信息 |

4、API 说明

// npm 安装使用
import { WXUpload } from '@zegoweb/wx-upload';
// 初始化上传
const uploader = new WXUpload(uplodConfig[，uploadOptions]);
// 开始上传
uploader.startUpload(WXFile)
// 暂停上传
uploader.pauseUpload()
// 续传
uploader.resumeUpload()
// 取消
uploader.cancelUpload();
// 获取上传状态、进度条、错误
uploader.emitter.on("*", (type, info) => {
  if(type === 'data') {
    // 获取上传状态、进度条等信息
    console.log(info);
  }
  if(type === 'error') {
    // 获取错误信息
    console.log(info);
  }
})

相关参数说明：

初始化： new WXUpload(uplodConfig[，uploadOptions]);

• uploadConfig:

  • 类型：Object
  • 说明：文件上传初始化参数

  | 参数 | 参数类型 | 是否必填 | 参数说明 | | --------- | -------- | -------- | ----------------------------------- | | token | string | 是 | 请求 Token | | apiPrefix | string | 是 | 上传后端 API 接口前缀 | | timeout | number | 否 | 上传请求超时时间，单位毫秒，默认：0 |

• uploadOptions：

  • 类型：Object

  • 说明：上传额外参数

  • 备注：默认（auto）,将采取动态处理分片大小，处理规则如下：

    • <10M 单个分片大小为 5M；

    • >50M 且<200M 单个分片大小为 10M；

    • >200M 且<1G 单个分片大小为 50M；

    • >1G 且<2G 单个分片为 100M；

    • >2G 单个分片为 200M

  | 参数 | 参数类型 | 是否必填 | 参数说明 | | --------- | ---------------- | -------- | ------------------------------------------------------ | | chunkSize | number | ‘auto’ | 否 | 文件单个分片大小，单位 Byte，必须大于 5M，默认: ‘auto’ |

const token = "710524909276631040",
  apiPrefix = "http://mm-test.zegonetwork.com:30002/api/v1/storage/breakpoint",
  chunkSize = 1024 * 1024 * 10;
const uploader = new WXUpload({ token, apiPrefix }, { chunkSize });

上传文件：uploader.startUpload(File)

• File:
  • 类型：File
  • 说明：选取文件(单个)

监听数据：uploader.emitter.on("*", (type, info) => {}

• 监听 type:

  • 类型：enum

  • 说明：监听的错误类型

    | 枚举值 | 说明 | | ------ | -------------------- | | data | 上传过程中，正确类型 | | error | 上传过程中，报错类型 |

• 监听 info:

  • 类型： Object

  • 说明：上传状态、进度条、错误等信息

  • 正确值：

    | 值 | 类型 | 说明 | | ---------- | ------ | ------------------------------------------------------------------------------------------------ | | statusCode | number | 状态值: 0:切片解析中；1: 解析完成 2:上传中；3:暂停上传中；4:暂停分片中；5:取消上传；6:上传完成； | | statusText | string | 状态值对应文案 | | progress | number | 进度百分比 | | spend | number | 耗时（秒） | | fileInfo | object | 上传完成文件信息 |

addFile(files: IWXUpload.WXFile[]) {
  const { fileList, token, apiPrefix } = this.data;
  // 先清空文件
  this.setData({ fileList: [] });
  for (let index = 0, len = files.length; index < len; index++) {
    // 初始化文件上传管理器，并监听
    const uploader = new WXUpload(
      { token, apiPrefix },
      { chunkSize: 1024 * 1024 * 5 }
    );
    const pos = fileList.length;
    fileList.push({
      ...files[index],
      index: pos,
      uploader,
      name: files[index].name,
      size: files[index].size,
      file: files[index],
      progress: 0,
      statusCode: 0,
      statusText: 0,
    });
    this.setData(
      {
        fileList: [...fileList],
      },
      () => {
        const { fileList } = this.data as any;
        uploader.emitter.on("*", (type, info) => {
          if (type === "data") {
            const { statusText, progress } = info as IWXUpload.EventData;
            [fileList[pos].statusText, fileList[pos].progress] = [
              statusText,
              progress,
            ];
            this.setData({
              fileList: [...fileList],
            });
            if (progress === 100) {
              console.log(`${fileList[index].name} 上传完成!`);
            }
          }
          if (type === "error") {
            console.error(info as IWXUpload.EventError);
          }
        });
      }
    );
    uploader.startUpload(files[index]);
  }
},

操作事件：uploader.pauseUpload()/uploader.resumeUpload()/uploader.cancelUpload()

• 多个文件上传

  async handlePause(e: any) {
    const index: number = e.currentTarget.dataset.index;
    console.log('handlePause');
    const { fileList } = this.data;
    try {
      const res = await fileList[index].uploader.pauseUpload();
      const { statusText, progress } = res;
      [fileList[index].statusText, fileList[index].progress] = [
        statusText,
        progress,
      ];
    } catch (error) {
      console.log({ error });
    }
  },

  async handleResume(e: any) {
    const index: number = e.currentTarget.dataset.index;
    console.log('handleResume');
    const { fileList } = this.data;
    try {
      await fileList[index].uploader.resumeUpload();
    } catch (error) {
      console.log({ error });
    }
  },

  async handleCancel(e: any) {
    const index: number = e.currentTarget.dataset.index;
    console.log('handleCancel');
    const { fileList } = this.data;
    try {
      const res = await fileList[index].uploader.cancelUpload();
      const { statusText, progress } = res;
      [fileList[index].statusText, fileList[index].progress] = [
        statusText,
        progress,
      ];
    } catch (error) {
      console.log({ error });
    }
  }

案例

案例请参考源码的 example