<template>
|
<el-upload
|
class="avatar-uploader"
|
:action="api"
|
:show-file-list="false"
|
:on-success="handleAvatarSuccess"
|
:before-upload="beforeAvatarUpload"
|
:on-error="onError"
|
:accept="accept"
|
:on-progress="onProgress"
|
:headers="headers"
|
:ref="ids"
|
:multiple="more"
|
>
|
<div v-if="!slots" class="db">
|
<span v-if="showImg">
|
<i class="el-icon-plus"></i>
|
<b>上传</b>
|
</span>
|
<span v-else>
|
<img :src="imageUrl" alt v-if="imageUrl" @error="onImageError" />
|
<i v-else class="el-icon-plus"></i>
|
<b v-if="!imageUrl">上传</b>
|
</span>
|
</div>
|
<div v-else class>
|
<slot></slot>
|
</div>
|
</el-upload>
|
</template>
|
|
<script>
|
import imageVideo from "./default_video.png";
|
export default {
|
props: {
|
showImg: { type: Boolean, default: false },
|
accept: { type: String, default: "" },
|
slots: { type: Boolean, default: false },
|
pic: { type: String, default: "" },
|
ids: { type: String, default: "upload" },
|
submit: { type: Number, default: 0 },
|
url: { type: String, default: "" },
|
more: { type: Boolean, default: false },
|
exp: {
|
type: Array,
|
default: () => {
|
return ["image"];
|
},
|
},
|
},
|
components: {},
|
data() {
|
return {
|
imageUrl: "",
|
api: "",
|
headers: { Authorization: "" },
|
upload: null,
|
load: null,
|
};
|
},
|
watch: {
|
pic(n) {
|
this.setPic(n);
|
},
|
submit(n) {
|
if (n) {
|
this.upload && this.upload.submit();
|
}
|
},
|
url(n) {
|
this.api = n;
|
},
|
},
|
methods: {
|
onImageError() {
|
let exp = (this.imageUrl + "").split(".");
|
exp = exp[exp.length - 1];
|
if (["jpg", "jpeg", "gif", "png"].indexOf(exp) >= 0) {
|
return "";
|
}
|
this.imageUrl = imageVideo;
|
},
|
handleAvatarSuccess(v) {
|
this.openLoad(true);
|
this.imageUrl = v.data || "";
|
if (v.code === 200) {
|
this.$emit("path", v.data);
|
} else {
|
this.$emit("error", v);
|
}
|
},
|
beforeAvatarUpload(v) {
|
let type = this.exp.indexOf(v.type.split("/")[0]) >= 0;
|
this.$emit("on-before", v);
|
let size = v.size / 1024 / 1024 < 20;
|
if (!type) {
|
demo.toast("上传格式不正确");
|
}
|
if (!size) {
|
demo.toast("上传大小不能超过 20MB!");
|
}
|
this.$api.load();
|
return type && size;
|
},
|
setPic(n) {
|
if (!this.slots) {
|
this.imageUrl = n;
|
}
|
},
|
onProgress(v) {
|
this.openLoad();
|
this.$emit("on-progress", v.percent);
|
},
|
onError(err) {
|
demo.alert(err);
|
this.openLoad(true);
|
},
|
openLoad(f) {
|
if (f) {
|
if (this.load) {
|
demo.remove(this.load);
|
this.load = null;
|
}
|
return 0;
|
}
|
if (this.load !== null) return 0;
|
this.load = demo.loading();
|
},
|
},
|
mounted() {
|
this.api = this.$js.api.upload;
|
if (this.url) {
|
this.api = this.url;
|
}
|
this.headers.Authorization = "Bearer " + demo.$session.get("token") || "";
|
this.upload = this.$refs[this.ids];
|
this.setPic(this.pic);
|
},
|
};
|
</script>
|
<style lang="less">
|
.el-upload {
|
height: 100%;
|
width: 100%;
|
}
|
</style>
|
<style lang='less' scoped>
|
.avatar-uploader .el-upload {
|
/*border: 1px dashed #d9d9d9;*/
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
|
img {
|
border-radius: 5px;
|
}
|
}
|
.avatar-uploader {
|
width: 100px;
|
height: 100px;
|
}
|
|
.avatar-uploader .el-upload:hover {
|
border-color: #409eff;
|
}
|
|
.avatar-uploader-icon {
|
font-size: 28px;
|
color: #8c939d;
|
text-align: center;
|
}
|
|
.avatar-uploader-icon,
|
.avatar-uploader,
|
.db,
|
img {
|
width: 100%;
|
height: 100%;
|
display: block;
|
}
|
</style>
|
