vue+七牛云上传视频文件

七牛云官方jssdk文档：
https://developer.qiniu.io/kodo/sdk/javascript
plupload第三方上传插件文档：
http://chaping.github.io/plupload/doc/#

安装引入

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

// 在页面中引入
import * as qiniu from 'qiniu-js'

功能简介

上传

• html5 模式大于 4 M 时可分块上传，小于 4 M 时直传
• Flash、html4 模式直接上传
• 继承了 Plupload 的功能，可筛选文件上传、拖曳上传等

服务端准备

JS-SDK依赖服务端颁发的上传凭证，后端服务应提供一个 URL 地址，供 SDK 初始化使用，前端通过 Ajax 请求该地址后获得 upToken。 Ajax 请求成功后，服务端应返回如下格式的 json：

{
    "uptoken": "0MLvWPnyya1WtPnXFy9KLyGHyFPNdZceomL..."
    "xxx": "..."
}

上传步骤

1.生成上传选择的点选按钮

<div id="video_container" class="video-container">// 上传按钮的父元素
    <div id="pickfiles" class="pickfiles"></div>// 上传按钮
</div>

2.前端通过接口请求获取token信息
3.创建Qiniu.uploader

mounted(){
      this.getQiniuToken(() => {
        this.initQiniu()  // 将initQiniu()当做callback回调函数传入给getQiniuToken函数
      })
    }
//methods里面
initQiniu: function () {
// uploader为一个plupload对象，继承了所有plupload的方法
this.uploader = Qiniu.uploader({
    //常用配置：
    runtimes: 'html5,flash,html4',      // 上传模式，依次退化(照着官网来就是了)
    browse_button: 'pickfiles' //上传选择的点选按钮，这是必须项
    container: 'video_container' // 上传区域的DOM Id
    bucket_name: 'bucket01' //存储空间的空间名 七牛云后台可查
    domain: 'https://xxx.com' //空间域名 七牛云后台可查
    token: 'xxxxxxx' //上传凭证，JS-SDK 依赖服务端颁发 token,必填项
    chunk_size: '4mb' //分片上传时，每块的体积
    max_file_size: '100mb',//最大文件体积限制
    get_new_uptoken: false,  // 设置上传文件的时候是否每次都重新获取新的uptoken(没有特殊需求一般为false)
    auto_start: true, // 选择文件后自动上传，若关闭需要自己绑定事件触发上传
    max_retries: 3,  // 上传失败最大重试次数
    dragdrop: false, // 开启可拖曳上传
    save_key: true,
	init: {
          'FilesAdded': function(up, files) {
              plupload.each(files, function(file) {
                  // 文件添加进队列后，处理相关的事情
              });
          },
          'BeforeUpload': function(up, file) {
                 // 每个文件上传前，处理相关的事情
                 // (上传文件前做一些处理)
          },
          'UploadProgress': function(up, file) {
                 // 每个文件上传时，处理相关的事情
                  _this.videoProgressValue = file.precent;// (给进度条赋值)
                  //init里的this不是vue，所以在一个开始var _this = this
          },
          'FileUploaded': function(up, file, info) {
                 // 每个文件上传成功后，处理相关的事情
                 // 其中info是文件上传成功后，服务端返回的json，形式如：
                 // {
                 //    "hash": "Fh8xVqod2MQ1mocfI4S4KpRL6D98",
                 //    "key": "gogopher.jpg"
                 //  }
                 // 查看简单反馈
                 // var domain = up.getOption('domain');
                 // var res = parseJSON(info);
                 // var sourceLink = domain +"/"+ res.key; 获取上传成功后的文件的Url
          },
          'Error': function(up, err, errTip) {
                 //上传出错时，处理相关的事情
          },
          'UploadComplete': function() {
                 //队列文件处理完毕后，处理相关的事情
          },
          'Key': function(up, file) {
              // 若想在前端对每个文件的key进行个性化处理，可以配置该函数
              // 该配置必须要在unique_names: false，save_key: false时才生效
 
              var key = "";
              // do something with key here
              // (可以自定义key不设定默认是文件名)
              return key
          }
      })
    }

// domain为七牛空间对应的域名，选择某个空间后，可通过 空间设置->基本设置->域名设置 查看获取

在项目工作过程中遇到了一个问题，iphone5的手机可以选择视频但上传七牛进度一直是1%，
这个问题原因应该是之前plupload一直没有彻底解决的iOS环境下兼容性的问题，经过多次尝试找到解决办法，添加下面这个属性就可以解决

multi_selection: false, // 限制只能上传单张图片

但是添加这个属性后选择视频会多走一层预览+压缩的步骤，这个步骤过于耗时，所以做了特殊处理，只有在iphone5时才将multi_selection置为false，这样虽然损失了一些便利性，但确保了上传视频功能的正常使用

多个上传实例

var option1 = {
  key : val,
  ……
};
var uploader = Qiniu.uploader(option1);
var Qiniu2 = new QiniuJsSDK(); // QiniuJsSDK顾名思义七牛的JS-SDK对象
var option2 = {
  key : val,
  ……
};
var uploader2 = Qiniu2.uploader(option2);