<template>
|
<div class="upload_index" style="height:132px">
|
<transition-group name="el-zoom-in-center" class="upload_index">
|
<div v-for="(item) in fileList" :key="item.id" class="file_lists_style" @mouseenter="showClose(item)" @mouseleave="setClose">
|
<div :class="{close_icon:close == item.id, close_icons:close != item.id}">
|
<el-tooltip effect="dark" content="预览图片" placement="left">
|
<i class="el-icon-zoom-in" @click="lookImage(item)"></i>
|
</el-tooltip>
|
<div class="look_line" v-if="!disabled"></div>
|
<el-tooltip effect="dark" content="删除" placement="right" v-if="!disabled">
|
<i class="el-icon-delete" @click="delectImage(item)"></i>
|
</el-tooltip>
|
</div>
|
<img :src="item.url" class="file_img">
|
<el-tooltip class="item" effect="light" :content="item.nameImg" placement="top">
|
<div class="img-text">{{item.nameImg}}</div>
|
</el-tooltip>
|
</div>
|
<el-upload
|
:key="5762"
|
ref="upload"
|
class="upload_images"
|
:action="action"
|
:http-request="requestUpload"
|
:show-file-list="false"
|
:disabled="disabled"
|
:auto-upload="true"
|
:multiple="false"
|
:before-upload="beforeUpload">
|
<i class="el-icon-plus avatar_uploader_icon"><span>上传图片</span></i>
|
</el-upload>
|
</transition-group>
|
<div class="upload_info">
|
<slot name="info"></slot>
|
</div>
|
<el-dialog
|
:title="imgName"
|
class="prop_dialog imgName_dialog"
|
:visible.sync="asyncImage"
|
append-to-body>
|
<div class="look-image">
|
<img :src="imageUrl" height="100%" width="100%" >
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
export default {
|
name: "UploadImage",
|
props:{
|
fileList: {
|
type: Array,
|
default: () => []
|
},
|
disabled:Boolean
|
},
|
data(){
|
return{
|
action:"#",
|
close:'',
|
loading:null,
|
formData:null,
|
imageUrl:"",
|
imgName:"",
|
asyncImage:false
|
}
|
},
|
methods:{
|
//展示删除样式
|
showClose(item){
|
this.close = item.id
|
},
|
//不展示删除样式
|
setClose(){
|
this.close = ""
|
},
|
//删除按钮
|
delectImage(item){
|
this.$emit('delectImage',{...item})
|
},
|
//预览按钮
|
lookImage(item){
|
this.imgName = item.nameImg
|
this.imageUrl = item.url
|
this.asyncImage = true
|
},
|
//上传前校验
|
beforeUpload(file){
|
// if(this.fileList.length === 1){
|
// this.$message.warning('仅能上传一张图片！')
|
// return false
|
// }
|
if(file.size>2*1024*1024){
|
this.$message.warning('请不要上传超过2M的图片！！！')
|
return false
|
}
|
},
|
//检查文件类型
|
checkFileType(name) {
|
let obj = {
|
"png": true,
|
"jpg": true,
|
"gif": true,
|
}
|
return obj[name]
|
},
|
//自定义上传方式
|
requestUpload(file){
|
let type = file.file.name.split('.')
|
let bol = this.checkFileType(type[type.length-1])
|
if(!bol){
|
this.$message.warning("请上传正确的文件格式")
|
return false
|
}
|
this.createLoadling()
|
this.formData = new FormData()
|
this.formData.set('file', file.file)
|
this.$api.Notice.uploadImageNotices(this.formData).then(res=>{
|
console.log(res,'55555555')
|
if(res.statusMsg === 'ok'){
|
this.loading.close()
|
this.$message.success("上传成功！！！")
|
this.fileList.push({
|
id: this.fileList.length + 1,
|
// url:`${process.env.VUE_APP_BASE_URL}${res.data}`,
|
url:`https://pipe.thhy-tj.com/${res.data}`,
|
name:res.data,
|
nameImg:file.file.name
|
})
|
}
|
}).catch(() => {
|
this.loading.close();
|
})
|
},
|
//加载动画
|
createLoadling() {
|
this.loading = this.$loading({
|
lock: true,
|
text: '正在上传中....',
|
spinner: 'el-icon-loading',
|
background: 'rgba(0, 0, 0, 0.7)'
|
})
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
.imgName_dialog{
|
::v-deep .el-dialog__title{
|
color: #39B5FE;
|
}
|
}
|
.upload_index{
|
display: flex;
|
flex-wrap: wrap;
|
position: relative;
|
|
.file_lists_style{
|
width: 100px;
|
height: 100px;
|
margin: 10px 4px;
|
position: relative;
|
display: flex;
|
justify-content: space-around;
|
flex-direction: column;
|
border-radius: 6px;
|
|
.file_img{
|
width: 100%;
|
height: 100%;
|
border-radius: 6px;
|
}
|
|
.close_icon{
|
width: 100%;
|
height: 100%;
|
font-size: 30px;
|
color: #dfdfdf;
|
position: absolute;
|
cursor: pointer;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
border-radius: 6px;
|
background-color: rgba(0,0,0,.5);
|
}
|
|
.close_icons{
|
display: none;
|
}
|
|
.look_line{
|
width: 2px;
|
height: 30px;
|
margin: 0 10px;
|
background-color: #cccccc;
|
}
|
}
|
|
.upload_images{
|
width: 100px;
|
height: 100px;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin: 10px 4px;
|
border-radius: 6px;
|
position: relative;
|
border: 2px dashed #39B5FE;
|
}
|
|
.avatar_uploader_icon{
|
font-size: 28px;
|
color: #D8D8D8;
|
position: absolute;
|
transform: translate(-50%,-50%);
|
span{
|
font-size: 12px;
|
display: flex;
|
margin-top: 10px;
|
}
|
}
|
|
.upload_info{
|
color: #3E719D;
|
position: absolute;
|
left: 6px;
|
bottom: -20px;
|
line-height: 25px;
|
white-space: nowrap;
|
overflow: hidden;
|
text-align: center;
|
text-overflow: ellipsis;
|
}
|
.img-text {
|
width: 100%;
|
height: 20px;
|
line-height: 20px;
|
font-size: 14px;
|
position: absolute;
|
white-space:nowrap;
|
overflow: hidden;
|
text-align: center;
|
text-overflow: ellipsis;
|
bottom: -20px;
|
color: #dfdfdf;
|
}
|
}
|
</style>
|
