Vue中使用vue-simple-uploader实现分块上传功能

公司业务逻辑是要上传视频，并且显示进度条，当视频过大时会严重影响客户体验，所以要对视频进行分块处理，一段一段的上传，显示进度条，让用户知道我的视频上传进行到哪里来了。
找了很多方法，最后决定用vue-simple-uploader来实现
vue-simple-uploader相当于一个上传器，他会自动将视频分割成若干段，然后一个一个进行上传，简单易上手。
首先安装vue-simple-uploader

  npm install vue-simple-uploader --save

然后在main.js中：

import uploader from 'vue-simple-uploader'
Vue.use(uploader)

然后在组件中使用

     <uploader :options="options"
          class="uploader-example">
          <uploader-unsupport></uploader-unsupport>
          <uploader-drop>
            <uploader-btn :attrs="attrs">新增视频</uploader-btn>
          </uploader-drop>
          <uploader-list></uploader-list>
        </uploader>

  <script>
    export default {
      data() {
        return {
            options: {
                  target: this.$http.adornUrl('/generator/upload/ftpUpload'),//上传地址
                  testChunks: false,
                  headers: {//设置header
                        token: this.$cookie.get('token')
                  },
                  query:{//传参
                       fileType: 2
                  }
           },
              attrs: {
                   accept: 'image/*'//接受文件类型
            },
        }
      }
  }
</script>

如图

image.png

转载于:https://www.jianshu.com/p/6ce987c7da23