1.获取七牛的qiniu.min.js

使用 NPM 安装

npm install qiniu-js
const qiniu = require('qiniu-js')
// or
import * as qiniu from 'qiniu-js'

通过源码编译
git clone git@github.com:qiniu/js-sdk.git，进入项目根目录执行 npm install ，执行 npm run build，即可在dist 目录生成 qiniu.min.js。

2.前端源码

<template>
  <div class="upload">
    <a-button type="primary" @click="changeVideo">
      上传视频
    </a-button>
    已上传大小：{{ fileSize }}M
    <a-progress :percent="percent" status="active" />
    <input type="file" ref="videoInput" style="display: none;" @change="changeFile">
  </div>
</template>
<script>
require('./qiniu.min.js')
export default {
  name: 'UploadVideo',
  components: {
  },
  data () {
    return {
      upToken: null,
      fileSize: 0,
      percent: 0
    }
  },
  methods: {
    changeVideo () {
      this.$refs.videoInput.dispatchEvent(new MouseEvent('click'))
    },
    changeFile (e) {
      let file = e.target.files[0] // 对象，上传的文件
      if (file.size > 50000000) {
        this.$message.error(`文件超过50M，无法上传!`)
        return
      }
      if (file.type !== 'video/mp4') {
        this.$message.error(`请上传mp4格式的视频文件!`)
        return
      }
      let key = Math.floor(Math.random() * 1000000000000) + '.' + file.name.substring(file.name.lastIndexOf('.') + 1) // 文件资源名
      /*
      * config.useCdnDomain: 是否使用 cdn 加速域名，true or false，默认为 false。
      * config.disableStatisticsReport: 是否禁用日志报告，为布尔值，默认为false。
      * config.region: 选择上传域名区域；当为 null 或 undefined 时，自动分析上传域名区域
      * config.retryCount: 上传自动重试次数（整体重试次数）；默认3次（即上传失败后最多重试两次）；
      * config.concurrentRequestLimit: 分片上传的并发请求量，number，默认为3；
      * config.checkByMD5: 是否开启 MD5 校验，在断点续传时校验分片，默认为 false，不开启。
      */
      let qiniu = global.qiniu
      let config = {
        useCdnDomain: true
      }

      /*
      * fname: string，文件原文件名.
      * params: object，用来放置自定义变量;
      * mimeType: null || array，用来限制上传文件类型，为 null 时表示不对文件类型限制；
      * 限制类型放到数组里： ["_uploads/photos/png", "_uploads/photos/jpeg", "_uploads/photos/gif"]
      */
      let putExtra = {
        fname: file.name,
        params: {},
        mimeType: ['video/mp4']
      }
      let that = this
      let observe = {
        next (res) {
          console.log('已上传大小，单位为字节：' + res.total.loaded)
          console.log('本次上传的总量控制信息，单位为字节：' + res.total.size)
          console.log('当前上传进度，范围：0～100：' + res.total.percent)
          if ((res.total.loaded / 1000000) > that.fileSize) {
            that.fileSize = res.total.loaded / 1000000
          }
          if (res.total.percent > 0 && parseInt(res.total.percent) > that.percent) {
            that.percent = parseInt(res.total.percent)
          }
        },
        error (err) {
          console.log(err.code)
          console.log(err.message)
          console.log(err.isRequestError)
          console.log(err.reqId)
        },
        complete (res) {
        // 完成后的操作
        // 上传成功以后会返回key 和 hash  key就是文件名了！
          console.log(res)
        }
      }
      // 开始上传  token 需要找后端获取(单独的方法)
      let observable = qiniu.upload(file, key, this.upToken, putExtra, config)
      observable.subscribe(observe)
    }
  },
  mounted () {
    this.$api.join.getUpToken().then(res => {
      if (res.status === 0) {
        this.upToken = res.data.upToken
      }
    }).catch(err => {
      console.log(err)
    })
  }
}
</script>
<style lang="scss" scoped>

</style>

3.后端获取token源码

Auth auth = Auth.create(ACCESS_KEY, SECRET_KEY);