Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
HeliosJ
gin-vue-admin
提交
0b98e539
G
gin-vue-admin
项目概览
HeliosJ
/
gin-vue-admin
与 Fork 源项目一致
Fork自
FLIPPED-AURORA / gin-vue-admin
通知
4
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
G
gin-vue-admin
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
前往新版Gitcode,体验更适合开发者的 AI 搜索 >>
提交
0b98e539
编写于
4月 14, 2020
作者:
J
jinlan.du
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
断点续传UI
上级
55b7e560
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
112 addition
and
11 deletion
+112
-11
web/src/view/example/breakpoint/breakpoint.vue
web/src/view/example/breakpoint/breakpoint.vue
+112
-11
未找到文件。
web/src/view/example/breakpoint/breakpoint.vue
浏览文件 @
0b98e539
<
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 为方法自带参数 相当于 dom的e 流存在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
;
}
</
style
>
#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
>
\ No newline at end of file
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录