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

Posted 2021-09-09 攻城Alone

功能

• 对于大于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 作为文件名。

  <!-- 我使用的是时间戳加文件名再通过md5加密 -->
  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
            }
        }
      })
    }
  

效果