< div class = " upload-images" >
< div class = " img-box" v-for = " (item,index) in uploadImages" :key = " index" >
< div class = " icon-po" >
< img class = " image" :src = " item" >
< div class = " icon-close" @click = " imgclose(index)" > ×</ div>
</ div>
</ div>
< van-uploader
:after-read = " onRead"
accept = " image/jpg, image/jpeg"
multiple
class = " icon-add"
> </ van-uploader>
</ div>
onRead ( e) {
let fd = new FormData ( )
if ( e instanceof Array && e. length) {
e. forEach ( item => {
fd. append ( "files" , item. file)
} )
} else {
fd. append ( "files" , e. file)
}
axios. post ( '/file/multiUpload' , fd)
. then ( res => {
this . uploadImages = [ ... this . uploadImages, ... res. Result]
} )
} ,
imgclose ( e) {
this . uploadImages. splice ( e, 1 )
} ,
.upload-images {
padding : 0 20px;
.img-box {
display : inline-block;
}
.image {
width : 60px;
height : 80px;
}
.icon-add {
width : 40px;
height : 40px;
border : 1px solid #9a9ba3;
border-radius : 50%;
overflow : hidden;
display : inline-block;
margin-top : 20px;
}
.icon-add:before {
content : "" ;
position : absolute;
width : 50px;
height : 2px;
left : 50%;
top : 50%;
margin-left : -25px;
margin-top : -1px;
background-color : #aaabb2;
}
.icon-add:after {
content : "" ;
position : absolute;
width : 2px;
height : 50px;
left : 50%;
top : 50%;
margin-left : -1px;
margin-top : -25px;
background-color : #aaabb2;
}
.icon-po {
position : relative;
width : 60px;
height : 80px;
margin-right : 20px;
margin-top : 20px;
}
.icon-close {
position : absolute;
right : -8px;
top : -8px;
width : 16px;
height : 16px;
border-radius : 50%;
background-color : red;
color : #fff;
font-size : 12px;
display : flex;
align-items : center;
justify-content : center;
}
}