Skip to content
Toggle navigation
Toggle navigation
This project
Loading...
Sign in
jijin
/
dance-pc
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Network
Create a new issue
Builds
Commits
Issue Boards
Files
Commits
Network
Compare
Branches
Tags
edeececc
authored
2025-06-05 16:08:48 +0800
by
zhangmeng
Browse Files
Options
Browse Files
Tag
Download
Plain Diff
Merge branch 'dev' into card
2 parents
caa89a71
a16e72c8
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
33 additions
and
21 deletions
src/components/ImageUpload/index.vue
src/components/ImageUpload/index.vue
View file @
edeecec
...
...
@@ -27,28 +27,30 @@
</draggable>
<el-upload
ref=
"imageUpload"
:
multiple=
"limit > 1
"
:
accept=
"accept
"
:action=
"actionUrl || uploadImgUrl"
list-type=
"picture-card"
:on-success=
"handleUploadSuccess"
:before-remove=
"handleDelete"
:before-upload=
"handleBeforeUpload"
:class=
"{ hide: fileList.length >= limit }"
:disabled=
"disabled"
:file-list=
"fileListInUpload"
:headers=
"headers"
:limit=
"limit"
:multiple=
"limit > 1"
:name=
"paramName"
:on-error=
"handleUploadError"
:on-exceed=
"handleExceed"
:before-remove=
"handleDelete"
:show-file-list=
"showFileList"
:headers=
"headers"
:on-preview=
"handlePictureCardPreview"
:file-list=
"fileListInUpload"
:class=
"{ hide: fileList.length >= limit }"
:name=
"paramName"
:disabled=
"disabled"
:accept=
"accept"
:on-success=
"handleUploadSuccess"
:show-file-list=
"showFileList"
list-type=
"picture-card"
>
<el-icon
class=
"avatar-uploader-icon"
><plus
/></el-icon>
<el-icon
class=
"avatar-uploader-icon"
>
<plus
/>
</el-icon>
</el-upload>
</el-row>
<!-- 上传提示 -->
<div
v-if=
"showTip && fileList.length < limit"
class=
"el-upload__tip"
>
请上传
...
...
@@ -62,12 +64,12 @@
</
template
>
的文件
</div>
<el-dialog
v-model=
"dialogVisible"
append-to-body
title=
"预览"
width=
"800px"
append-to-body
>
<img
:src=
"dialogImageUrl"
...
...
@@ -79,8 +81,9 @@
<
script
setup
>
import
{
getToken
}
from
'@/utils/auth'
import
{
computed
,
getCurrentInstance
,
ref
,
watch
,
defineProps
,
defineEmits
}
from
'vue'
import
{
computed
,
getCurrentInstance
,
ref
,
watch
,
defineProps
,
defineEmits
}
from
'vue'
import
_
from
'lodash'
import
{
useStorage
}
from
'@vueuse/core/index'
const
props
=
defineProps
({
modelValue
:
[
String
,
Object
,
Array
],
...
...
@@ -136,13 +139,17 @@ const actionUrl = computed(() => {
})
const
{
proxy
}
=
getCurrentInstance
()
const
emit
=
defineEmits
([
'update:modelValue'
,
'response'
])
const
language
=
useStorage
(
'language'
,
0
)
const
number
=
ref
(
0
)
const
uploadList
=
ref
([])
const
dialogImageUrl
=
ref
(
''
)
const
dialogVisible
=
ref
(
false
)
const
baseUrl
=
import
.
meta
.
env
.
VITE_APP_BASE_API
const
uploadImgUrl
=
ref
(
baseUrl
+
'/upload/uploadImgToLocalServer'
)
// 上传的图片服务器地址
const
headers
=
ref
({
Authorization
:
'Bearer '
+
getToken
()
})
const
headers
=
ref
({
Authorization
:
'Bearer '
+
getToken
(),
'Content-Language'
:
language
.
value
==
0
?
'zh_CN'
:
'en_US'
})
const
fileList
=
ref
([])
const
fileListInUpload
=
ref
([])
const
showTip
=
computed
(
...
...
@@ -229,11 +236,10 @@ function handleUploadSuccess(res, file) {
proxy
.
$refs
.
imageUpload
.
handleRemove
(
file
)
uploadedSuccessfully
()
}
}
else
{
}
else
{
proxy
?.
$modal
.
closeLoading
()
emit
(
'response'
,
res
)
}
}
// 删除图片
...
...
@@ -256,7 +262,7 @@ function uploadedSuccessfully() {
number
.
value
=
0
emit
(
'update:modelValue'
,
listToString
(
fileList
.
value
))
proxy
.
$modal
.
closeLoading
()
if
(
fileList
.
value
.
length
>
1
)
{
fileListInUpload
.
value
=
[]
}
...
...
@@ -292,11 +298,12 @@ function draggableEnd() {
}
</
script
>
<
style
scoped
lang=
"scss"
>
<
style
lang=
"scss"
scoped
>
//
.el-upload--picture-card
控制加号部分
:deep
(
.hide
.el-upload--picture-card
)
{
display
:
none
;
}
.fileItem
{
position
:
relative
;
width
:
160px
;
...
...
@@ -305,11 +312,13 @@ function draggableEnd() {
margin
:
0
20px
20px
0
;
float
:
left
;
}
.fileItem
img
{
width
:
100%
;
height
:
100%
;
object-fit
:
cover
;
}
.fileItem
.hover-actions
{
background
:
rgba
(
0
,
0
,
0
,
0.4
);
width
:
100%
;
...
...
@@ -320,6 +329,7 @@ function draggableEnd() {
color
:
#fff
;
transition
:
top
0.2s
;
text-align
:
center
;
span
{
cursor
:
pointer
;
font-size
:
26px
;
...
...
@@ -327,10 +337,12 @@ function draggableEnd() {
margin
:
50px
5px
;
display
:
inline-block
;
}
span
:hover
{
background
:
rgba
(
255
,
255
,
255
,
0.4
);
}
}
.fileItem
:hover
.hover-actions
{
top
:
0
;
}
...
...
Write
Preview
Styling with
Markdown
is supported
Attach a file
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 post a comment