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

1、 安装

# 方式一：npm/pnpm/yarn 安装
pnpm 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 ZUpload(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
  • 说明：选取文件(单个)

<template>
  <div class="contain">
    <input type="file" @change="onFileAdded" multiple />
  </div>
</template>

<script>
const token = "zego-token",
  apiPrefix = "zego-apiPrefix",
  chunkSize = 1024 * 1024 * 10;
export default {
  methods: {
    onFileAdded(e) {
      const uploader = new ZUpload({ token, apiPrefix }, { chunkSize });
      const file = e.target.files[0];
      uploader.startUpload(file);
    },
  },
};
</script>

监听数据：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 | 上传完成文件信息 |

uploader.emitter.on("*", (type, info) => {
  if (type === "data") {
    const { statusCode, statusText, progress, spend, fileInfo } = info;
    [this.fileList[index].statusText, this.fileList[index].progress] = [
      statusText,
      progress,
      spend,
      fileInfo,
    ];
    if (progress === 100) {
      this.messageList.push(
        `${this.fileList[index].name} 上传完成, 耗时: ${
          spend ? spend + "s" : "秒传"
        }, 存储文件名：${fileInfo.fileId}, 存储桶：${fileInfo.bucket}`
      );
    } else {
      this.messageList.push(
        `${this.fileList[index].name} 上传, 当前状态码: ${statusCode}, 当前状态文字: ${statusText}`
      );
    }
  }
  if (type === "error") {
    const { code, message } = info;
    if (code === -1) {
      this.fileList[index].statusText = "上传错误";
      this.messageList.push(
        `${this.fileList[index].name} 上传失败, ${message}`
      );
    }
  }
});

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

• 多个文件上传

// 暂停
async handlePause(index) {
  try {
    const res = await this.fileList[index].uploader.pauseUpload();
    console.log({res});
    const {statusCode, statusText, progress} = res;
    [this.fileList[index].statusText, this.fileList[index].progress] = [statusText, progress];
    this.messageList.push(`${this.fileList[index].name} 上传, 当前状态码: ${statusCode}, 当前状态文字: ${statusText}`)
  } catch (error) {
    console.log({error});
  }
},
// 续传
async handleResume(index) {
  try {
    await this.fileList[index].uploader.resumeUpload();
  } catch (error) {
    console.log({error});
  }
},
// 取消
async handleCancel(index) {
  try {
    const res = await this.fileList[index].uploader.cancelUpload();
    const {statusCode, statusText, progress} = res;
    [this.fileList[index].statusText, this.fileList[index].progress] = [statusText, progress];
    this.messageList.push(`${this.fileList[index].name} 上传, 当前状态码: ${statusCode}, 当前状态文字: ${statusText}`)
  } catch (error) {
    console.log({error});
  }
}

5、Demo 案例