Vue using vue-simple-uploader upload function block realized

Business logic is to upload a video, and display a progress bar when the video is too large will seriously affect the customer experience, so the video into blocks, a section of the upload progress bar is displayed to let the user know that my video uploads where to come.
Find a lot of ways, and finally decided to use vue-simple-uploader to achieve
vue-simple-uploader to upload the equivalent of a device, he will automatically split the video into several segments, then one by one upload, simple and approachable.
First install vue-simple-uploader

  npm install vue-simple-uploader --save

Then main.js in:

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

Is then used in the assembly

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

Figure

image.png

Reproduced in: https: //www.jianshu.com/p/6ce987c7da23