最近做一個視頻存儲的項目袖瞻，使用了Vue-element-template模板進(jìn)行整合司致，其中有一個需求是做一個視頻上傳的斷點續(xù)傳功能，經(jīng)過查詢資料做出來了聋迎，過程如下：
首先：先安裝vue-simple-uploader插件脂矫，然后在main.js中引入使用。
安裝：npm install vue-simple-uploader --save****
使用：
import uploader from 'vue-simple-uploader'
Vue.use(uploader)
然后引入common,components文件夾砌庄，講這兩個文件夾放到一個自己建好的uploader文件夾中羹唠。
然后在與uploader文件夾同級下的index.vue文件中使用下面的代碼即可
<template>
<div>
<uploader :options="options" :file-status-text="statusText" class="uploader-example" ref="uploader" @file-complete="fileComplete" @complete="complete"></uploader>
</div>
</template>
<script>
export default {
data () {
return {
options: {
target: 'http://127.0.0.0:8086/video/upload', // '//jsonplaceholder.typicode.com/posts/',
testChunks: false
},
attrs: {
accept: 'image/*'
},
statusText: {
success: '成功了',
error: '出錯了',
uploading: '上傳中',
paused: '暫停中',
waiting: '等待中'
}
}
},
methods: {
complete () {
console.log('complete', arguments)
},
fileComplete () {
console.log('file complete', arguments)
}
},
mounted () {
this.$nextTick(() => {
window.uploader = this.$refs.uploader.uploader
})
}
}
</script>
<style>
.uploader-example {
width: 880px;
padding: 15px;
margin: 40px auto 0;
font-size: 12px;
box-shadow: 0 0 10px rgba(0, 0, 0, .4);
}
.uploader-example .uploader-btn {
margin-right: 4px;
}
.uploader-example .uploader-list {
max-height: 440px;
overflow: auto;
overflow-x: hidden;
overflow-y: auto;
}
</style>
參考如下鏈接：
https://www.cnblogs.com/xiahj/p/vue-simple-uploader.html
最后附上源碼地址：
