目录 问题图 el-upload 预览组件 PicturePreview 效果展示
问题图
el-upload
< el-uploadref = " upload" multiple drag action = " #" :auto-upload = " false" :file-list = " fileList" name = " files" :accept = " `.png,.jpg,.jpeg,.JGP,.JPEG,.PNG,.doc,.docx,.xls,.xlsx${isTz ? ',.mp4,.MP4' : ''}`" :on-change = " beforeAvatarUpload" list-type = " picture"
> < i class = " el-icon-upload" /> < div class = " el-upload__text" > 将文件拖到此处,或< em> 点击上传</ em> </ div> < div slot = " tip" class = " el-upload__tip" > 支持上传png/jpg/jpeg/doc/docx/xls/xlsx文件,且不超过5M</ div> < div slot = " file" slot-scope = " { file }" > < PicturePreview :file = " file" @remove = " removeFile" /> </ div>
</ el-upload> import PicturePreview from '@/components/PicturePreview'components:{PicturePreview}removeFile(file) {this.$refs.upload.handleRemove(file)
},
预览组件 PicturePreview
< template> < div class = " file_container" > < div class = " file" > < el-imagev-if = " /(gif|jpg|jpeg|png|GIF|JPG|JPEG|PNG)$/.test(fileType)" :src = " file.url" :preview-src-list = " [file.url]" /> < i v-else class = " el-icon-tickets" /> </ div> < div class = " name" > {{ file.name }}</ div> < i class = " el-icon-close" @click = " $emit('remove', file)" /> </ div>
</ template> < script>
export default { name : 'PicturePreview' , components : { } , props : { file : { type : Object, required : true } } , data ( ) { return { } } , computed : { fileType ( ) { return this . file. name. split ( '.' ) . pop ( ) } } , watch : { } , created ( ) { } , methods : { }
}
</ script> < style lang = ' scss' scoped >
.file_container { position : relative; .file { $size : 80px; width : $size; height : $size; background-color : #f7f7f7; position : absolute; left : -85px; top : -5px; display : flex; align-items : center; justify-content : center; .el-image { width : 100%; height : 100%; } .el-icon-tickets { font-size : 30px; } } .name { } .el-icon-close { position : absolute; top : 5px; right : 5px; font-size : 10px; }
}
</ style>
效果展示