Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
P
play_office
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
play_office
Commits
82f0eaca
Commit
82f0eaca
authored
Nov 05, 2024
by
liujiangnan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 进度上传
parent
7b073012
Changes
4
Expand all
Hide whitespace changes
Inline
Side-by-side
Showing
4 changed files
with
68 additions
and
1 deletion
+68
-1
index.css
form/index.css
+9
-0
index.html
form/index.html
+10
-1
index.js
form/index.js
+47
-0
axios.min.js
lib/js/axios.min.js
+2
-0
No files found.
form/index.css
View file @
82f0eaca
.edit-data
{
.edit-data
{
padding
:
10px
;
padding
:
10px
;
}
.upload-progress
{
margin-top
:
20px
;
padding
:
10px
;
}
.upload-progress
.el-button
{
margin-top
:
10px
;
}
}
\ No newline at end of file
form/index.html
View file @
82f0eaca
...
@@ -8,6 +8,7 @@
...
@@ -8,6 +8,7 @@
<link
href=
"./index.css"
rel=
"stylesheet"
>
<link
href=
"./index.css"
rel=
"stylesheet"
>
<script
type=
"text/javascript"
src=
"../lib/js/jquery-1.12.3.min.js"
></script>
<script
type=
"text/javascript"
src=
"../lib/js/jquery-1.12.3.min.js"
></script>
<script
type=
"text/javascript"
src=
"../lib/js/axios.min.js"
></script>
<script
type=
"text/javascript"
src=
"../lib/common.js"
></script>
<script
type=
"text/javascript"
src=
"../lib/common.js"
></script>
<script
type=
"text/javascript"
src=
"../lib/vue.min.js"
></script>
<script
type=
"text/javascript"
src=
"../lib/vue.min.js"
></script>
...
@@ -28,13 +29,21 @@
...
@@ -28,13 +29,21 @@
:on-success=
"handleCoverSuccess"
:on-success=
"handleCoverSuccess"
:on-error=
"handleCoverError"
:on-error=
"handleCoverError"
:before-upload=
"beforeCoverUpload"
:before-upload=
"beforeCoverUpload"
:http-request=
"customUpload"
>
>
<i
class=
"el-icon-upload"
></i>
<i
class=
"el-icon-upload"
></i>
<div
class=
"el-upload__text"
>
将文件拖到此处,或
<em>
点击上传
</em></div>
<div
class=
"el-upload__text"
>
将文件拖到此处,或
<em>
点击上传
</em></div>
<div
class=
"el-upload__tip"
slot=
"tip"
>
只能上传pdf/ppt/word文件,且不超过100Mb
</div>
<div
class=
"el-upload__tip"
slot=
"tip"
>
只能上传pdf/ppt/word文件,且不超过100Mb
</div>
</el-upload>
</el-upload>
<!-- 添加进度条和取消按钮 -->
<div
v-if=
"uploading"
class=
"upload-progress"
>
<el-progress
:percentage=
"uploadProgress"
></el-progress>
<el-button
type=
"danger"
size=
"small"
@
click=
"cancelUpload"
>
取消上传
</el-button>
</div>
<br>
<br>
<el-link
v-if=
"fileData"
:
src
=
"fileData.url"
>
{{fileData.name}}
</el-link>
<el-link
v-if=
"fileData"
:
href
=
"fileData.url"
>
{{fileData.name}}
</el-link>
</div>
</div>
</body>
</body>
<script
src=
"./index.js"
></script>
<script
src=
"./index.js"
></script>
...
...
form/index.js
View file @
82f0eaca
...
@@ -25,9 +25,51 @@ new Vue({
...
@@ -25,9 +25,51 @@ new Vue({
fileData
:
null
,
fileData
:
null
,
uploadUrl
:
window
.
courseware
.
uploadUrl
(),
uploadUrl
:
window
.
courseware
.
uploadUrl
(),
uploadCover
:
window
.
courseware
.
uploadData
(),
uploadCover
:
window
.
courseware
.
uploadData
(),
uploading
:
false
,
uploadProgress
:
0
,
cancelTokenSource
:
null
,
}
}
},
},
methods
:
{
methods
:
{
customUpload
(
options
)
{
this
.
uploading
=
true
;
this
.
uploadProgress
=
0
;
// 创建 FormData
const
formData
=
new
FormData
();
formData
.
append
(
'
file
'
,
options
.
file
);
// 创建取消令牌
this
.
cancelTokenSource
=
axios
.
CancelToken
.
source
();
// 发起上传请求
axios
.
post
(
this
.
uploadUrl
,
formData
,
{
cancelToken
:
this
.
cancelTokenSource
.
token
,
onUploadProgress
:
(
progressEvent
)
=>
{
this
.
uploadProgress
=
Math
.
round
((
progressEvent
.
loaded
*
100
)
/
progressEvent
.
total
);
},
headers
:
{
'
Content-Type
'
:
'
multipart/form-data
'
}
}).
then
(
response
=>
{
this
.
handleCoverSuccess
(
response
.
data
,
options
.
file
);
this
.
uploading
=
false
;
this
.
cancelTokenSource
=
null
;
}).
catch
(
error
=>
{
if
(
axios
.
isCancel
(
error
))
{
console
.
log
(
'
上传已取消
'
);
}
else
{
this
.
handleCoverError
(
error
);
}
this
.
uploading
=
false
;
this
.
cancelTokenSource
=
null
;
});
},
cancelUpload
()
{
if
(
this
.
cancelTokenSource
)
{
this
.
cancelTokenSource
.
cancel
(
'
用户取消上传
'
);
}
},
handleCoverSuccess
(
response
,
file
,
fileList
)
{
handleCoverSuccess
(
response
,
file
,
fileList
)
{
if
(
response
.
msg
===
"
error
"
){
if
(
response
.
msg
===
"
error
"
){
this
.
$message
.
error
(
'
文件上传失败!
'
);
this
.
$message
.
error
(
'
文件上传失败!
'
);
...
@@ -45,6 +87,11 @@ new Vue({
...
@@ -45,6 +87,11 @@ new Vue({
this
.
$message
.
error
(
'
文件上传失败!
'
);
this
.
$message
.
error
(
'
文件上传失败!
'
);
},
},
beforeCoverUpload
(
file
)
{
beforeCoverUpload
(
file
)
{
// 如果正在上传,则不允许新的上传
if
(
this
.
uploading
)
{
this
.
$message
.
warning
(
'
请等待当前文件上传完成或取消上传
'
);
return
false
;
}
const
isOffice
=
(
file
.
type
===
'
application/pdf
'
||
file
.
type
.
indexOf
(
`application/vnd.openxmlformats`
)
==
0
);
const
isOffice
=
(
file
.
type
===
'
application/pdf
'
||
file
.
type
.
indexOf
(
`application/vnd.openxmlformats`
)
==
0
);
const
isLt2M
=
file
.
size
/
1024
/
1024
/
1024
<
2
;
const
isLt2M
=
file
.
size
/
1024
/
1024
/
1024
<
2
;
...
...
lib/js/axios.min.js
0 → 100644
View file @
82f0eaca
This diff is collapsed.
Click to expand it.
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment