公司业务逻辑是要上传视频，并且显示进度条，当视频过大时会严重影响客户体验，所以要对视频进行分块处理，一段一段的上传，显示进度条，让用户知道我的视频上传进行到哪里来了。
找了很多方法，最后决定用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
