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

以下附上完整代码