< template> < ! -- -- > < el- uploadref= "uploadRef" : headers= "headers" : action= "action" : limit= "limit" : list- type= "listType" : auto- upload= "autoUpload" : show- file- list= "showFileList" : on- exceed= "exceed" : on- success= "success" : accept= "accept && accept.toString()" : before- upload= "beforeUpload" : before- remove= "handleRemove" : data= "uploadData" > < slot name= "file" / > < slot / > < slot name= "tip" / > < / el- upload>
< / template>
< script setup>
import { ref } from 'vue'
import { getUserToken } from '@/utils/auth'
import { Message } from 'element-ui' const uploadRef = ref ( null ) const props = defineProps ( { autoUpload : { type : Boolean, default : ( ) => true , } , disabled : { type : Boolean, default : false , } , listType : { type : String, default : '' , } , showFileList : Boolean, file : Array, handleRemove : Function, limit : { type : Number, default : 4 , } , allowSize : { type : Number, default : 1024 * 5 , } , accept : { type : Array, default : ( ) => [ '.png' , '.jpg' , '.jpeg' , '.ico' ] , } , path : { type : String, default : '/sys/file' , } , uploadData : { type : Object, default : ( ) => { return { source : 'zybscrm' , opType : 99 , } } , } ,
} )
const headers = ref ( { 'X-Token' : getUserToken ( ) ,
} ) const action = ref ( process. env. VUE_APP_PAAS_BASE_API + props. path) const emit = defineEmits ( [ 'uploadSuccess' , 'exceed' , 'handleRemove' ] ) const handleRemove = ( file, fileList ) => { const index = fileList. indexOf ( file) console. log ( file, fileList, index) emit ( 'handleRemove' , file, fileList, index)
} const beforeUpload = ( file, fileList ) => { console. log ( fileList, 'fileList' ) if ( props. accept) { const index = props. accept. indexOf ( file. name. substring ( file. name. lastIndexOf ( '.' ) ) . toLowerCase ( ) ) if ( index < 0 ) { Message. warning ( '图片格式不正确' ) return false } } if ( props. allowSize) { const kb = file. size / 1024 const isLtSize = kb < props. allowSizeconst sizeStr = props. allowSize >= 1024 ? ` ${ Math. round ( ( props. allowSize / 1024 ) * 100 ) / 100 } MB ` : ` ${ props. allowSize} KB ` if ( ! isLtSize) { Message. error ( ` 图片不能超过 ${ sizeStr} 哦 ` ) return false } }
} const exceed = ( files ) => { Message. warning ( ` 当前限制上传 ${ props. limit} 个文件 ` ) emit ( 'exceed' , files)
} const success = ( res, file ) => { console. log ( file, 'file' ) if ( res. code === 511 ) { Message. warning ( res. message) return } emit ( 'uploadSuccess' , res, file)
}
< / script>
< style lang= "scss" scoped> < / style> < el- form : model= "Form" : rules= "rules" ref= "FormRef" class = "formDiv" > < h5> 设置背景图< / h5> < el- form- item class = "fenMianImg" label= "" prop= "bgImageUrls" > < div class = "el-upload-list el-upload-list--picture-card" : class = "'img-112'" > < span v- for = "(item, index) in Form.bgImageUrls" : key= "index" > < div class = "el-upload-list__item is-ready" > < el- image class = "el-upload-list__item-thumbnail" : src= "item" fit= "contain" > < / el- image> < span class = "el-upload-list__item-actions" > < span class = "el-upload-list__item-delete" @click= "fileRemove(index)" > < i class = "el-icon-delete" width= "16" height= "16" > < / i> < / span> < / span> < / div> < / span> < / div> < uploader : showFileList= "false" @uploadSuccess= "uploadSuccessBg" > < div class = "bggoImg" > < i class = "el-icon-plus" > < / i> < / div> < / uploader> < / el- form- item> < div class = "instructions" > 支持 jpg/ png/ jpeg文件，文件大小不超过3M、背景图最多上传4 张< / div>
< / el- form> const FormRef = ref ( null )
const rules = ref ( { bgImageUrls : [ { required : true , message : '背景图不能为空' , trigger : [ 'blur' , 'change' ] , } , ] ,
} )
const Form = ref ( { id : '' , bgImageUrls : [ ] ,
} ) + 方发
const uploadSuccessBg = ( res ) => { let { filePath } = res. dataForm. value. bgImageUrls. push ( filePath) FormRef. value. clearValidate ( 'bgImageUrls' )
}
const fileRemove = ( index ) => { console. log ( index) Form. value. bgImageUrls. splice ( index, 1 )
} + 样式. fenMianImg{ margin : 20px 0 0 20px; & . disabled . el- upload-- picture- card, & . disabled . el- upload-- picture- card i { color : #c9cdd4; cursor : not- allowed; } . img- 112 { float : left; . el- upload- list__item, . upload- icon { width : 112px; height : 112px; float : left; } } . img- 100 { . el- upload- list__item, . upload- icon { width : 100px; height : 100px; float : left; } . upload- icon { padding : 14px 0 ; } } . el- upload-- picture- card { line- height: inherit; padding : 22px 0 ; color : #1d2129; background : #f2f3f5; border- radius: 4px; border : 1px dashed #e5e6eb; i { font- size: 16px; font- weight: 400 ; color : #1d2129; vertical- align: middle; & + p { line- height: 24px; } } } . el- upload- list-- picture- card { display : inline- block; } . el- upload__tip { font- size: 14px; color : #86909c; margin : 0 ; line- height: 1 ; } . el- upload . el- button-- medium { padding : 10px 12px; img { width : 14px; margin- right: 8px; } } }
