<template>
|
<!-- <el-upload-->
|
<!-- class="avatar-uploader"-->
|
<!-- :action="api"-->
|
<!-- :show-file-list="false"-->
|
<!-- :on-success="handleAvatarSuccess"-->
|
<!-- :before-upload="beforeAvatarUpload"-->
|
<!-- :on-error="onError"-->
|
<!-- :on-progress="onProgress"-->
|
<!-- :headers="headers"-->
|
<!-- :ref="ids"-->
|
<!-- >-->
|
<!-- <div-->
|
<!-- v-if="!slots"-->
|
<!-- class="db"-->
|
<!-- >-->
|
<!-- <img-->
|
<!-- :src="imageUrl"-->
|
<!-- alt=""-->
|
<!-- v-if="imageUrl"-->
|
<!-- >-->
|
<!-- <i-->
|
<!-- v-else-->
|
<!-- class="el-icon-plus"-->
|
<!-- ></i><b v-if="!imageUrl">上传</b>-->
|
<!-- </div>-->
|
<!-- <div-->
|
<!-- v-else-->
|
<!-- class="db"-->
|
<!-- >-->
|
<!-- <slot></slot>-->
|
<!-- </div>-->
|
<!-- </el-upload>-->
|
<ImgCutter
|
:isModal="true"
|
toolBgc="#bbb"
|
:tool="false"
|
:boxWidth="boxWidth"
|
:boxHeight="boxHeight"
|
:cutWidth="width"
|
:cutHeight="height"
|
:sizeChange="false"
|
v-on:cutDown="cutDown"
|
class="as"
|
>
|
<div
|
slot="open"
|
v-if="!slots"
|
class="db"
|
>
|
<img
|
class="contImg"
|
:src="imageUrl"
|
alt=""
|
v-if="imageUrl"
|
>
|
<i
|
v-else
|
class="el-icon-plus"
|
></i><b v-if="!imageUrl">上传</b>
|
</div>
|
</ImgCutter>
|
</template>
|
|
<script>
|
// vue-img-cutter 裁剪工具 https://gitee.com/GLUESTICK/vue-img-cutter
|
import ImgCutter from "vue-img-cutter";
|
|
export default {
|
props: {
|
boxWidth: { type: Number, default: 400 }, //裁剪工具宽高
|
boxHeight: { type: Number, default: 200 },
|
width: { type: Number, default: 200 }, //裁剪图片宽高
|
height: { type: Number, default: 200 },
|
slots: { type: Boolean, default: false },
|
pic: { type: String, default: "" },
|
ids: { type: String, default: "upload" },
|
submit: { type: Number, default: 0 },
|
url: { type: String, default: "" },
|
exp: {
|
type: Array,
|
default: () => {
|
return ["image"];
|
},
|
},
|
},
|
components: { ImgCutter },
|
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: {
|
cutDown(e) {
|
//新的下载组件回调
|
console.log(e);
|
// return
|
var formData = new FormData();
|
formData.append("file", e.file);
|
this.$api.post("communitypartybuilding/uploadimage", formData, (e) => {
|
// console.log(e)
|
this.imageUrl = e || "";
|
this.$emit("path", e);
|
});
|
},
|
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' scope>
|
.contImg {
|
height: 100%;
|
}
|
.as {
|
width: 104px;
|
height: 104px;
|
}
|
.db {
|
color: #888;
|
text-align: center;
|
height: 104px;
|
background-color: #f7f7f7;
|
cursor: pointer;
|
overflow: hidden;
|
i {
|
margin: 0 auto !important;
|
font-size: 26px;
|
line-height: 70px;
|
height: 70px;
|
display: block;
|
}
|
b {
|
line-height: 1;
|
display: block;
|
}
|
}
|
.avatar-uploader .el-upload {
|
/*border: 1px dashed #d9d9d9;*/
|
border-radius: 6px;
|
cursor: pointer;
|
position: relative;
|
overflow: hidden;
|
|
img {
|
border-radius: 5px;
|
}
|
}
|
|
.avatar-uploader .el-upload:hover {
|
border-color: #409eff;
|
}
|
|
.avatar-uploader-icon {
|
font-size: 28px;
|
color: #8c939d;
|
text-align: center;
|
}
|
|
.avatar-uploader-icon,
|
.avatar-uploader,
|
img {
|
width: 100%;
|
height: 100%;
|
display: block;
|
}
|
</style>
|
