@zegoweb/wx-upload v1.0.4

媒资断点续传 - 微信小程序 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