七牛上传控件

事例

• Qiniu Clound Mock
• Unit Test

文档

• 使用文档
• 开发文档

安装

yarn add qiniup

特点

• 支持分块分片上传
• 支持断点续传
• 支持 base64 文件上传

使用

import { Uploader } from 'qiniup'

// Docs: https://doc.esdoc.org/github.com/DavidKk/qiniu-uploader/class/src/uploader.js~Uploader.html#instance-constructor-constructor
let qiniup = new Uploader()

let params = { token: 'generated by sdk' }

// Docs: https://doc.esdoc.org/github.com/DavidKk/qiniu-uploader/class/src/uploader.js~Uploader.html#instance-method-upload
qiniup.upload(file, params, { resumingByFileSize: 4 * 1024 * 1024 /** 默认也为 4M, 如果大于4M则使用分块分片(同时支持断点续传)上传 */ }, function (error) {
  if (error) {
    console.log(error)
    return
  }

  // upload success, somthing todo...
})

动态获取 token

let qiniup = new Uploader({
  tokenGetter (callback) {
    // do some async or sync request logic to get token
    callback(null, token)

    // or
    // 同时也可以设置过期时间（在 0.2.0 版本以上才适用）
    callback(null, { token, expire })
  }
})

获取上传状态

let progress = (event) => {
  console.log('当前进度为', event.loaded)
  console.log('总进度为', event.total)
  console.log('进程百分比', event.loaded / event.total)

  console.log('上传事件类型', event.type)
  console.log('当前上传进程', event.process)
  console.log('所有已注册上传进程', event.processes)
}

// `resumingByFileSize = 0` 表示一定使用分段上传
qiniup.upload(file, params, { resumingByFileSize: 0, progress }, function () {
  // do something...
})