Skip to content

浏览器端 3.x 升级到 4.x 指南

Alain edited this page May 16, 2025 · 9 revisions

差异

移除

  • 图片处理

新增

  • 支持 v1 分片上传接口(兼容老集群)

变更

接口形式变更

v3 的接口基于 observable 的设计范式,如下:

const observable = qiniu.upload(file, key, token, putExtra, config)
const subscription = observable.subscribe(observer) // 上传开始,并监听进度、错误等信息
subscription.unsubscribe() // 上传取消

在 v4 中,我们采用了更直接的 task 设计范式来对接口进行了重新的设计,减少无关概念的抽象,使其更简单直接。

const uploadTask = createMultipartUploadTask(fileData, config);
uploadTask.onProgress((progress, context) => {}); // 设置进度回调函数
uploadTask.onComplete((result, context) => {}); // 设置完成回调函数
uploadTask.onError((error, context) => {}); // 设置错误回调函数
uploadTask.start(); // 开始任务
uploadTask.cancel(); // 取消任务

除了接口形式,对应的相关参数和数据结构也发生了一些变化,具体参考 v4 的文档。

错误处理

由于移除了图片处理等模块, 4.x 的错误情况大大减少。系统里目前包含两个错误类型:

  • UploadError:包含所有的网络和 SDK 层面的错误,与 3.xQiniuError 基本对标。
  • HttpRequestErrorUploadError 的一个特例,代表了请求层面的错误,额外多一些请求相关的错误状态,例如 httpCode、错误 message 以及用来跟踪请求的 reqId

一般,你可以在上传任务的 onError 回调中获取和处理错误,示例代码如下:

newUploadTask.onError(error => {
  // 网络错误
  if (error instanceof HttpRequestError) {
    console.log(error.httpCode)
    console.log(error.message)
    console.log(error.reqId)
    return
  }

  // 其他 SDK 错误
  console.log(error)
})
Clone this wiki locally