vue+七牛雲上傳視頻

上傳步驟

1.生成上傳選擇的點選按鈕
2.前端通過接口請求獲取token信息
3.創建qiniu.uploader

配置項

this.uploader = Qiniu.uploader({
        runtimes: 'html5,flash,html4', // 上傳模式，依次退化
        browse_button: 'pickfiles', // 上傳選擇的點選按鈕，必需
        uptoken: this.token, // uptoken是上傳憑證，由其他程序生成
        get_new_uptoken: true, // 設置上傳文件的時候是否每次都重新獲取新的uptoken
        bucket_name: 'common-web',
        unique_names: false, // 默認false，key爲文件名。若開啓該選項，JS-SDK會爲每個文件自動生成key（文件名）
        save_key: false, // 默認false。若在服務端生成uptoken的上傳策略中指定了sava_key，則開啓，SDK在前端將不對key進行任何處理
        domain: 'https://xxx.com', // bucket domain 
        container: 'video_container', // 上傳區域DOM ID，默認是browser_button的父元素
        max_file_size: '10mb', // 最大文件體積限制
        dragdrop: false, // 開啓可拖曳上傳
        drop_element: 'video_container', // 拖曳上傳區域元素的ID，拖曳文件或文件夾後可觸發上傳
        chunk_size: '4mb', // 分塊上傳時，每塊的體積
        max_retries: 3, // 上傳失敗最大重試次數
        auto_start: true, // 選擇文件後自動上傳，若關閉需要自己綁定事件觸發上傳
        init: {
          Key: function (up, files) {
            //當save_key和unique_names都爲false時，該方法將被調用
            return _this.filename
          },
          FilesAdded: function (up, files) {
            plupload.each(files, function (file) {
              // 文件添加進隊列後，處理相關的事情
              console.log('FilesAdded')
              _this.fileSize = _this.toDecimal(file.size)
            })
          },
          BeforeUpload: function (up, file) {
            console.log('BeforeUpload')
          },
          ChunkUploaded: function (up, file, info) {
            console.log('ChunkUploaded')
          },
          UploadProgress: function (up, file) {
            // 每個文件上傳時，處理相關的事情
            _this.filePercent = parseInt(file.percent)
            _this.fileLoaded = plupload.formatSize(file.loaded).toUpperCase()
            _this.fileSpeed = plupload.formatSize(file.speed).toUpperCase()
          },
          FileUploaded: function (up, file, info) {
            console.log('FileUploaded')
            let response = JSON.parse(info.response)
            _this.hash = response.hash
            _this.resFileName = response.key
            _this.coverPic = 'https://xxx.com/' + response.key + '?vframe/png/offset/7/w/480'
          },
          Error: function (up, err, errTip) {
            // 上傳出錯時，處理相關的事情
            _this.$toast('Error =')
            _this.$toast(err)
            _this.$toast('errTip =')
            _this.$toast(errTip)
          },
          UploadComplete: function () {
            // 隊列文件處理完畢後，處理相關的事情
            _this.$toast('UploadComplete')
          }
        }
      })

獲取視頻縮略圖

FileUploaded: function (up, file, info) { // 上傳文件成功的回調
    let response = JSON.parse(info.response)
    _this.coverPic = 'https://xxx.com/' + response.key + '?vframe/png/offset/7/w/480/h/360'
}

其他的API可以去七牛文檔查閱，https://developer.qiniu.com/d...

以下附上完整代碼

<template>
  <div class="upload">
    <div id="video_container">
      <div id="pickfiles">上傳視頻</div>
      <div>
        <div class="upload_info">
          <b>共{{ fileSize }}MB | 已上傳{{ fileLoaded }} | 上傳速度{{ fileSpeed }}/s</b>
        </div>
        <div>
          <b>上傳進度：{{ filePercent }}%</b>
        </div>
        <button @click="pauseUpload">暫停上傳</button>
        <button @click="continueUpload">繼續上傳</button>
      </div>
    </div>
    <div class="cover-pic" v-if='coverPic'>
      <img :src="coverPic" alt="">
    </div>
  </div>
</template>


<script>
import { apis, chttp } from '@/libs/interfaces'
require('qiniu-js/dist/qiniu.min.js')
export default {
  data () {
    return {
      fileSize: 0,
      fileLoaded: 0,
      fileSpeed: 0,
      filePercent: 0,
      uploader: null,
      token: '',
      filename: '',
      hash: '',
      resFileName: '',
      coverPic: ''
    }
  },
  methods: {
    pauseUpload () {
      this.uploader.stop()
    },
    continueUpload () {
      this.uploader.start()
    },
    toDecimal (size) {
      size = size / 1024 / 1024
      var f = parseFloat(size)
      if (isNaN(f)) {
        return
      }
      f = Math.round(size * 10) / 10
      var s = f.toString()
      var rs = s.indexOf('.')
      if (rs < 0) {
        rs = s.length
        s += '.'
      }
      while (s.length <= rs + 1) {
        s += '0'
      }
      return s
    },
    initUploader () {
      let plupload = window.plupload
      let Qiniu = global.Qiniu
      let _this = this
      // domain爲七牛空間對應的域名，選擇某個空間後，可通過 空間設置->基本設置->域名設置 查看獲取
      // uploader爲一個plupload對象，繼承了所有plupload的方法
      this.uploader = Qiniu.uploader({
        runtimes: 'html5,flash,html4', // 上傳模式，依次退化
        browse_button: 'pickfiles', // 上傳選擇的點選按鈕，必需
        uptoken: this.token, // uptoken是上傳憑證，由其他程序生成
        get_new_uptoken: true, // 設置上傳文件的時候是否每次都重新獲取新的uptoken
        bucket_name: 'common-web', // 空間名
        unique_names: false, // 默認false，key爲文件名。若開啓該選項，JS-SDK會爲每個文件自動生成key（文件名）
        save_key: false, // 默認false。若在服務端生成uptoken的上傳策略中指定了sava_key，則開啓，SDK在前端將不對key進行任何處理
        domain: 'https://xxx.com', // bucket domain eg:http://qiniu-plupload.qiniudn.com/
        container: 'video_container', // 上傳區域DOM ID，默認是browser_button的父元素
        max_file_size: '10mb', // 最大文件體積限制
        dragdrop: false, // 開啓可拖曳上傳
        drop_element: 'video_container', // 拖曳上傳區域元素的ID，拖曳文件或文件夾後可觸發上傳
        chunk_size: '4mb', // 分塊上傳時，每塊的體積
        max_retries: 3, // 上傳失敗最大重試次數
        auto_start: true, // 選擇文件後自動上傳，若關閉需要自己綁定事件觸發上傳
        init: {
          Key: function (up, files) {
            return _this.filename
          },
          FilesAdded: function (up, files) {
            plupload.each(files, function (file) {
              // 文件添加進隊列後，處理相關的事情
              console.log('FilesAdded')
              _this.fileSize = _this.toDecimal(file.size)
            })
          },
          BeforeUpload: function (up, file) {
            console.log('BeforeUpload')
          },
          ChunkUploaded: function (up, file, info) {
            console.log('ChunkUploaded')
          },
          UploadProgress: function (up, file) {
            // 每個文件上傳時，處理相關的事情
            _this.filePercent = parseInt(file.percent)
            _this.fileLoaded = plupload.formatSize(file.loaded).toUpperCase()
            _this.fileSpeed = plupload.formatSize(file.speed).toUpperCase()
          },
          FileUploaded: function (up, file, info) {
            console.log('FileUploaded')
            let response = JSON.parse(info.response)
            _this.hash = response.hash
            _this.resFileName = response.key
            _this.coverPic = 'https://xxx.com/' + response.key + '?vframe/png/offset/7/w/480'
          },
          Error: function (up, err, errTip) {
            // 上傳出錯時，處理相關的事情
            _this.$toast('Error =')
            _this.$toast(err)
            _this.$toast('errTip =')
            _this.$toast(errTip)
          },
          UploadComplete: function () {
            // 隊列文件處理完畢後，處理相關的事情
            _this.$toast('UploadComplete')
          }
        }
      })
    },
    getToken (callback) {
      this.filename = 'webvideo/' + new Date().getTime() + '.mp4'
      let params = {
        filename: this.filename
      }
      chttp.get(apis.qiniuToken, { params: params })
        .then(res => {
          this.token = res.token
          callback()
        })
    }
  },
  mounted () {
    this.getToken(() => {
      this.initUploader()
    })
  }
}
</script>


<style lang="scss" scoped>
</style>