@ -1,25 +1,35 @@
< template > < template >
< div class = "d-flex align-items-end" > < div >
< button v-if ="type=='file'" class="btn btn-light btn-sm change-file-button" > < div class = "d-flex align-items-end" >
{ { file && file . name || $t ( 'common.selectFile' ) } } < button v-if ="type=='file'" class="btn btn-light btn-sm change-file-button" >
< input type = "file" class = "file" :required ="required" :placeholder ="placeholder" ref = "file" @change ="change" / > { { file && file . name || $t ( 'common.selectFile' ) } }
< / button > < input type = "file" class = "file" :required ="required" :placeholder ="placeholder" ref = "file" @change ="change" / >
< div v -else class = "el-upload-dragger mr-2 flex-shrink-0" > < / button >
< label > < div v -else class = "el-upload-dragger mr-2 flex-shrink-0" >
< input type = "file" class = "file" :required ="required" :placeholder ="placeholder" ref = "file" @change ="change" / > < label >
< img class = "img" v -if = " uploadImg " :src ="imgFilter(uploadImg)" alt / > < input type = "file" class = "file" :required ="required" :placeholder ="placeholder" ref = "file" @change ="change" / >
< template v-else > < img class = "img" v -if = " uploadImg " :src ="imgFilter(uploadImg)" alt / >
< i class = "el-icon-upload" > < / i > < template v-else >
< slot name = "text" > < / slot > < i class = "el-icon-upload" > < / i >
< / template > < slot name = "text" > < / slot >
< / label > < / template >
< / div > < / label >
< div v-if ="file" > < / div >
< p > { { file . name } } < / p > < div v-if ="file" >
<!-- < button class = "btn upload-btn btn-sm btn-primary" @click ="upload" v-if ="!value" > {{ $ t ( ' common.upload ' ) }} < / button > - - > < p > { { file . name } } < / p >
<!-- v - else -- > <!-- < button class = "btn upload-btn btn-sm btn-primary" @click ="upload" v-if ="!value" > {{ $ t ( ' common.upload ' ) }} < / button > - - >
< button class = "btn upload-btn btn-sm btn-danger" @click ="del" > { { $t ( 'common.delete' ) } } < / button > <!-- v - else -- >
< / div > < button class = "btn upload-btn btn-sm btn-danger" @click ="del" > { { $t ( 'common.delete' ) } } < / button >
< / div >
< / div >
< el -progress
style = "width:300px"
v - if = "boll"
: percentage = "uploadProgress"
: status = "uploadStatus"
: stroke - width = "10"
class = "my-2"
> < / e l - p r o g r e s s >
< / div > < / div >
< / template > < / template >
< script > < script >
@ -30,7 +40,12 @@ export default {
return { return {
file : undefined , file : undefined ,
uploadImg : "" , uploadImg : "" ,
isLoad : false isLoad : false ,
uploadProgress : 0 , / / 新 增 进 度 状 态
uploadStatus : null , / / 新 增 状 态 类 型
progressInterval : null ,
boll : false ,
continueUploading : true
} ; } ;
} , } ,
watch : { watch : {
@ -48,6 +63,10 @@ export default {
} , } ,
methods : { methods : {
del ( ) { del ( ) {
this . uploadProgress = 0 ;
this . uploadStatus = null ;
this . boll = false
this . file = undefined ; this . file = undefined ;
this . $emit ( "input" , undefined ) ; this . $emit ( "input" , undefined ) ;
this . $refs . file . value = '' this . $refs . file . value = ''
@ -60,6 +79,9 @@ export default {
} }
} , } ,
change ( ev ) { change ( ev ) {
this . uploadProgress = 0 ;
this . uploadStatus = null ;
let file = this . $refs . file . files [ 0 ] ; let file = this . $refs . file . files [ 0 ] ;
let ele = this . $refs . file ; let ele = this . $refs . file ;
@ -68,8 +90,7 @@ export default {
allowSize : this . allowSize || 5 , / / 单 位 为 M allowSize : this . allowSize || 5 , / / 单 位 为 M
allowType : [ "image/png" , "image/jpg" , "image/jpeg" , "image/pdf" ] allowType : [ "image/png" , "image/jpg" , "image/jpeg" , "image/pdf" ]
} ; } ;
utils utils . upload ( option )
. upload ( option )
. then ( result => { . then ( result => {
if ( result . isIMG ) { if ( result . isIMG ) {
/ / 在 预 览 区 查 看 / / 在 预 览 区 查 看
@ -90,11 +111,44 @@ export default {
} ) ; } ) ;
} , } ,
upload ( ) { upload ( ) {
this . uploadStatus = null / / 重 置 状 态
this . uploadProgress = 0 / / 重 置 进 度
this . boll = true
clearInterval ( this . progressInterval ) ; / / 清 除 之 前 的 定 时 器
this . progressInterval = setInterval ( ( ) => {
if ( this . uploadProgress < 100 && this . continueUploading ) {
this . uploadProgress += Math . floor ( Math . random ( ) * 3 ) + 1 ;
setTimeout ( ( ) => {
this . continueUploading = false ;
/ / 暂 停 3 秒 后 继 续 累 加
setTimeout ( ( ) => {
this . continueUploading = true ;
} , 3000 ) ; / / 这 里 的 3 0 0 0 毫 秒 表 示 暂 停 3 秒 后 继 续
} , 1000 ) ;
}
} , 50 ) ;
let data = new FormData ( ) ; let data = new FormData ( ) ;
data . append ( "image" , this . file ) ; data . append ( "image" , this . file ) ;
Member . uploadImage ( data ) . then ( res => { Member . uploadImage ( data ) . then ( res => {
this . $emit ( "input" , res . path ) ; this . $emit ( "input" , res . path ) ;
} ) ; / / 2 秒 后 隐 藏 进 度 条
if ( res . path ) {
setTimeout ( ( ) => {
this . uploadStatus = 'success'
this . uploadProgress = 100
clearInterval ( this . progressInterval ) ; / / 清 除 之 前 的 定 时 器
setTimeout ( ( ) => {
this . boll = false
} , 3000 )
} , 2000 )
}
} ) . catch ( err => {
this . uploadStatus = 'exception'
this . uploadProgress = 100
this . $message . error ( this . $t ( 'common.uploadfailed' ) ) ;
} ) ;
} }
} }
} ; } ;
