vue+七牛云上传视频文件

1

安装使用

// 下载qiniu-js
npm install qiniu-js -D

// 使用页面中引入,注意要在所有import最后面
require('qiniu-js/dist/qiniu.min.js')

// 初始化
this.uploader = Qiniu.uploader({
    ...
})

上传步骤

1.生成上传选择的元素
2.前端通过接口请求获取token信息
3.创建qiniu.uploader

常用配置

  • 上传选择的点选按钮,这是必须项
browse_button: 'pickfiles'
  • 上传区域的设置
container: 'idName' // 上传区域的DOM Id
  • 文件类型的筛选
~~filters: { // 这个属性实测只在电脑上有用
  mime_types: [
    { title: 'Video files', extensions: 'avi,mov,rmvb,rm,flv,mp4,3GP,asf,qt,mpeg,mpg,dat,ram,viv' },
    { title: 'Image files', extensions: 'png' }
]~~

// 筛选文件类型最好放到BeforeUpload中处理
// return false 阻断文件上传
init: {
    BeforeUpload: function (up, file) {
        _this.fileType = file.name.split('.')[1]
        if (!['mp4', 'avi'].includes(_this.fileType)) {
          _this.$toast('请上传视频文件')
          return false
        }
    }
}
  • 获取上传文件成功后通过FileUploaded拿到key,拼上域名就是文件的URL,想要获取文件的封面图、元信息等可以到七牛文档查阅,https://developer.qiniu.com/d...

eg: URL+ '?vframe/png/offset/7/w/480/h/360'

init: {
    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'
      }
}
  • 获取上传文件的进度
init: {
     UploadProgress: function (up, file) {
        // 每个文件上传时,处理相关的事情
        _this.filePercent = parseInt(file.percent)
      },
}

以下附上完整代码

<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>

你可能感兴趣的

载入中...