You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
100 lines
2.4 KiB
100 lines
2.4 KiB
<template> |
|
<div class="component-upload-image"> |
|
<el-upload |
|
:action="uploadImgUrl" |
|
list-type="picture-card" |
|
:on-success="handleUploadSuccess" |
|
:before-upload="handleBeforeUpload" |
|
:on-error="handleUploadError" |
|
name="file" |
|
:show-file-list="false" |
|
:headers="headers" |
|
style="display: inline-block; vertical-align: top" |
|
> |
|
<el-image v-if="!value" :src="value"> |
|
<div slot="error" class="image-slot"> |
|
<i class="el-icon-plus" /> |
|
</div> |
|
</el-image> |
|
<div v-else class="image"> |
|
<el-image :src="value" :style="`width:150px;height:150px;`" fit="fill"/> |
|
<div class="mask"> |
|
<div class="actions"> |
|
<span title="预览" @click.stop="dialogVisible = true"> |
|
<i class="el-icon-zoom-in" /> |
|
</span> |
|
<span title="移除" @click.stop="removeImage"> |
|
<i class="el-icon-delete" /> |
|
</span> |
|
</div> |
|
</div> |
|
</div> |
|
</el-upload> |
|
<el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body> |
|
<img :src="value" style="display: block; max-width: 100%; margin: 0 auto;"> |
|
</el-dialog> |
|
</div> |
|
</template> |
|
|
|
<script> |
|
import { getToken } from "@/utils/auth"; |
|
|
|
export default { |
|
data() { |
|
return { |
|
dialogVisible: false, |
|
uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 上传的图片服务器地址 |
|
headers: { |
|
Authorization: "Bearer " + getToken(), |
|
}, |
|
}; |
|
}, |
|
props: { |
|
value: { |
|
type: String, |
|
default: "", |
|
}, |
|
}, |
|
methods: { |
|
removeImage() { |
|
this.$emit("input", ""); |
|
}, |
|
handleUploadSuccess(res) { |
|
this.$emit("input", res.url); |
|
this.loading.close(); |
|
}, |
|
handleBeforeUpload() { |
|
this.loading = this.$loading({ |
|
lock: true, |
|
text: "上传中", |
|
background: "rgba(0, 0, 0, 0.7)", |
|
}); |
|
}, |
|
handleUploadError() { |
|
this.$message({ |
|
type: "error", |
|
message: "上传失败", |
|
}); |
|
this.loading.close(); |
|
}, |
|
}, |
|
watch: {}, |
|
}; |
|
</script> |
|
|
|
<style scoped lang="scss"> |
|
.image { |
|
position: relative; |
|
.mask { |
|
opacity: 0; |
|
position: absolute; |
|
top: 0; |
|
width: 100%; |
|
background-color: rgba(0, 0, 0, 0.5); |
|
transition: all 0.3s; |
|
} |
|
&:hover .mask { |
|
opacity: 1; |
|
} |
|
} |
|
</style> |