Browse Source

断点续传UI

main
jinlan.du 5 years ago
parent
commit
0b98e53919
  1. 121
      web/src/view/example/breakpoint/breakpoint.vue

121
web/src/view/example/breakpoint/breakpoint.vue

@ -1,17 +1,31 @@
<template>
<div class="hello">
<form id="fromCont" method="post">
<input @change="choseFile" id="file" multiple="multiple" type="file" />
<el-divider content-position="left">大文件上传</el-divider>
<form id="fromCont" method="post" >
<div class="fileUpload">
选择文件<input @change="choseFile" id="file" multiple="multiple" type="file" />
</div>
</form>
<el-button @click="getFile">上传</el-button>
<span
<el-button @click="getFile" :disabled="limitFileSize" type="primary" size="medium" class="uploadBtn">上传文件</el-button>
<div class="el-upload__tip">请上传不超过5MB的文件</div>
<div class="list">
<transition-group name="list" tag="p">
<div class="list-item" v-for="(item,i) in uploadList" :key="i" >
<i class="el-icon-document"></i>
<span>{{ item.name }}</span>
<span v-if="file" class="percentage" >{{percentage}}%</span>
<el-progress :show-text='false' :text-inside="false" :stroke-width="2" :percentage="percentage"></el-progress>
</div>
</transition-group>
</div>
<!-- <span
v-if="this.file"
>{{Math.floor(((this.formDataList.length-this.waitNum)/this.formDataList.length)*100)}}%</span>
<h2>此版本为先行体验功能测试版样式美化和性能优化正在进行中上传切片文件和合成的完整文件分别再QMPlusserver目录的breakpointDir文件夹和fileDir文件夹</h2>
>{{Math.floor(((this.formDataList.length-this.waitNum)/this.formDataList.length)*100)}}%</span> -->
<h2 class="tips">此版本为先行体验功能测试版样式美化和性能优化正在进行中上传切片文件和合成的完整文件分别再QMPlusserver目录的breakpointDir文件夹和fileDir文件夹</h2>
</div>
</template>
<script>
import SparkMD5 from 'spark-md5'
import axios from 'axios'
import {
@ -27,15 +41,25 @@ export default {
fileMd5: '',
formDataList: [],
waitUpLoad: [],
waitNum: 0
waitNum: 0,
limitFileSize: false,
percentage:0,
percentageFlage: true,
customColor: '#409eff',
uploadList:[]
}
},
created(){
},
methods: {
//
async choseFile(e) {
const fileR = new FileReader() // reader
const file = e.target.files[0] //
const maxSize = 5*1024*1024
this.file = file // file 便 func
if(file.size<maxSize){
fileR.readAsArrayBuffer(file) // ArrayBuffer
fileR.onload = async e => {
// arrayBuffer e dome e.target.result
@ -83,6 +107,10 @@ export default {
}
this.waitNum = this.waitUpLoad.length //
}
} else {
this.limitFileSize = true
this.$message('请上传小于5M文件')
}
},
getFile() {
//
@ -90,7 +118,14 @@ export default {
this.$message('请先上传文件')
return
}
this.percentage = Math.floor(((this.formDataList.length-this.waitNum)/this.formDataList.length)*100)
if(this.percentage == 100){
this.percentageFlage = false
}
this.sliceFile() //
if(this.percentage == 100){
this.uploadList.push(this.file)
}
},
sliceFile() {
this.waitUpLoad &&
@ -119,7 +154,7 @@ export default {
fileMd5: this.fileMd5
}
const res = await breakpointContinueFinish(params)
if (res.code == 0) {
if (res.success) {
//
const params = {
fileName: this.file.name,
@ -134,7 +169,7 @@ export default {
}
</script>
<style scoped>
<style lang='scss' scoped>
h3 {
margin: 40px 0 0;
}
@ -149,4 +184,70 @@ li {
a {
color: #42b983;
}
#fromCont{
display: inline-block;
}
.fileUpload{
padding: 4px 10px;
height: 20px;
line-height: 20px;
position: relative;
cursor: pointer;
color: #000;
border: 1px solid #c1c1c1;
border-radius: 4px;
overflow: hidden;
display: inline-block;
input{
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
cursor: pointer;
}
}
.fileName{
display: inline-block;
vertical-align: top;
margin: 6px 15px 0 15px;
}
.uploadBtn{
position: relative;
top: -10px;
margin-left: 15px;
}
.tips{
margin-top: 30px;
font-size: 14px;
font-weight: 400;
color: #606266;
}
.el-divider{
margin: 0 0 30px 0;
}
.list{
margin-top:15px;
}
.list-item {
display: block;
margin-right: 10px;
color: #606266;
line-height: 25px;
margin-bottom: 5px;
width: 40%;
.percentage{
float: right;
}
}
.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to
/* .list-leave-active for below version 2.1.8 */ {
opacity: 0;
transform: translateY(-30px);
}
</style>
Loading…
Cancel
Save