七牛多图及分段上传(JavaScript)

功能

对于大于4M的用分块上传，小于4M时只传
分块上传，支持断点续传

使用

直接使用静态文件地址：ttps://cdnjs.cloudflare.com/ajax/libs/qiniu-js/<version>/qiniu.min.js，会生成全局名为qiniu的对象
使用 NPM 安装
1. npm install qiniu-js --S
2. import * as qiniu from 'qiniu-js'
3. 如果在单个页面内可以直接像第二步那样在import导入即可，在全局，则在main.js中导入并瓜挂载vue的原型上Vue.prototype.$qiniu = qiniu

上传

上传之前需要调用接口来获取七牛的上传凭证(token)
qiniu.upload 返回一个 observable 对象用来控制上传行为，observable 对像通过 subscribe 方法可以被 observer 所订阅，订阅同时会开始触发上传，同时返回一个 subscription 对象，该对象有一个 unsubscribe 方法取消订阅，同时终止上传行为。
```
const observable = this.$qiniu.upload(e.target.files[i], key, uploadtoken, putExtra, config)
```

observable: 为一个带有 subscribe 方法的类实例

  observable.subscribe({
    next: (result) => {
      //主要用来展示进度
      console.log(result.total.percent)
    },
    error: (err) => {
      //上传错误后触发
      console.log(err)
    },
    complete: (result) => {
      //上传成功后触发。包含文件地址。
      console.log(result, 1111)
    }
  })

upload 参数及配置

file: 对象，上传的文件
key：文件资源名，为空字符串时则文件资源名也为空，为 null 或者 undefined 时则自动使用文件的 hash 作为文件名。
```

const key = md5(new Date().getTime() + e.target.files[i].name)
```
token: 上传验证信息，前端通过接口请求后端获得
config：object，全部可选
1. useCdnDomain：是否使用 cdn 加速域名，布尔值
2. disableStatisticsReport：是否禁用日志报告，布尔值
3. region：选择上传域名区域，当为 null 或 undefined 时，自动分析上传域名区域
4. chunkSize：分片上传时每片的大小，必须为正整数
5. forceDirect：是否上传全部采用直传方式
```
const config = {
  useCdnDomain: true,
  // region: null,
  domain: "https://images.xxx.com",
  chunkSize: 10,
  forceDirect: false
};
```

putExtra：object，全部可选

  const putExtra = {
    fname: e.target.files[i].name,    // 文件原始文件名
    params: {},                       // 用来放置自定义变量
    mimeType: 'video/mp4'             // 指定所传的文件类型
  }

具体的可以参考：https://developer.qiniu.com/kodo/1283/javascript

多图

即在上述的方法上进行一个简单的封装后，可以配置原生的input进行多文件上传

  <!-- multiple 属性 可以实现多选的功能  -->
  <input id="file" class="filepath" multiple ref="upload_video" accept=".mp4,.m3u8" @change="changeVideo($event)" type="file">

上传的方法

  for (let i = 0; i < e.target.files.length; i++) {
    const perobj = {
        percentage: 0,
        isshow: false
    }
    this.percenarr.push(perobj)
    if (e.target.files[i].size / 1024 > 1024 * 300 ) {
        this.$message.error(`上传的第${i+1}个视频超过300M！`)
        if (i === e.target.files.length - 1 && !this.percenarr.some(curr => curr.isshow === true)) {
            this.isUpd = false
            this.percenarr = []
            e.target.value = ''
        }
        continue
    }
    this.uploadfunc(e, uploadtoken, i)
  }

  // 上传的方法
  uploadfunc(e, uploadtoken, i) {
    this.percenarr[i].isshow = true
    const key = md5(new Date().getTime() + e.target.files[i].name)
    const config = {
      useCdnDomain: true,
      // region: null,
      domain: "https://images.qingtv.com",
      chunkSize: 10,
      forceDirect: false
    };
    const putExtra = {
      fname: e.target.files[i].name,    //文件原始文件名
      params: {}, 
      mimeType: 'video/mp4'
    }
    const observable = this.$qiniu.upload(e.target.files[i], key, uploadtoken, putExtra, config);
    observable.subscribe({
      next: (result) => {
        //主要用来展示进度
        this.percenarr[i].percentage = parseInt(result.total.percent)
      },
      error: (err) => {
        //上传错误后触发
        console.log(err)
        this.percenarr[i].isshow = false
        this.percenarr[i].percentage = 0
      },
      complete: (result) => {
          //上传成功后触发。包含文件地址。
          // console.log(result, 1111);
          // resolve(result)
          this.percenarr[i].isshow = false
          this.percenarr[i].percentage = 0
          }
      }
    })
  }

七牛多图及分段上传(JavaScript)

功能

使用

上传

upload 参数及配置

多图

效果