<template>
|
<div class="activity-cover-content">
|
<div class="activity-cover fl-cen" v-if="fileImg === ''">
|
<el-upload
|
action
|
:http-request="uploadFileHandle"
|
:before-upload="beforeAvatarUploadImg"
|
:show-file-list="false"
|
>
|
<div class="img-check-btn fl-cen">上传图片</div>
|
</el-upload>
|
<div
|
class="img-check-btn fl-cen"
|
style="margin-left: 30px"
|
@click="imgListCheck"
|
>
|
图库选择
|
</div>
|
</div>
|
<div v-else class="img-shwo-box">
|
<el-image
|
class="img-shwo"
|
:src="fileImg"
|
:preview-src-list="[fileImg]"
|
fit="cover"
|
></el-image>
|
<div class="img-check-btn2 fl-cen" @click.stop="deleteImgHandle">
|
删除图片
|
</div>
|
</div>
|
<!-- 裁剪图片 -->
|
<el-dialog
|
title="图片裁剪"
|
:visible.sync="dialogVisible"
|
:before-close="handleClose"
|
:close-on-click-modal="false"
|
append-to-body
|
>
|
<div class="cropper-content">
|
<div class="cropper" style="text-align: center">
|
<vueCropper
|
ref="cropper"
|
:img="option.img"
|
:outputSize="option.size"
|
:outputType="option.outputType"
|
:info="true"
|
:full="option.full"
|
:canMove="option.canMove"
|
:canMoveBox="option.canMoveBox"
|
:autoCropWidth="width"
|
:autoCropHeight="height"
|
:original="option.original"
|
:autoCrop="option.autoCrop"
|
:fixedBox="option.fixedBox"
|
:fixed="option.fixed"
|
:fixedNumber="[width, height]"
|
></vueCropper>
|
</div>
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="handleClose">取 消</el-button>
|
<el-button type="primary" :loading="btnLoading" @click="finishCofirm"
|
>确 定</el-button
|
>
|
</span>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script>
|
export default {
|
props: {
|
width: {
|
type: Number,
|
default: 800,
|
},
|
height: {
|
type: Number,
|
default: 800,
|
},
|
cover: {
|
type: String,
|
default: "",
|
},
|
},
|
computed: {
|
fileImg: {
|
get: function () {
|
return this.cover;
|
},
|
set: function () {
|
return this.cover;
|
},
|
},
|
},
|
data() {
|
return {
|
dialogVisible: false,
|
btnLoading: false,
|
option: {
|
img: "",
|
outputSize: 1, // 剪切后的图片质量（0.1-1）
|
full: true, // 输出原图比例截图 props名full
|
outputType: "png",
|
canMove: false,
|
original: false,
|
canMoveBox: true,
|
autoCrop: true,
|
fixedBox: false,
|
fixed: true,
|
maxImgSize: 3000, // 图片最大像素
|
}, // 截图配置
|
};
|
},
|
methods: {
|
uploadFileHandle(f) {
|
console.log(f);
|
},
|
beforeAvatarUploadImg(file) {
|
const imgType = ["image/png", "image/jpeg", "video/mp4"];
|
if (imgType.indexOf(file.type) === -1) {
|
showToast("只能上传 png jpeg jpg 格式图片或者视频文件!", "error");
|
return false;
|
} else {
|
return true;
|
}
|
},
|
handleClose() {
|
this.dialogVisible = false;
|
},
|
dataURLtoFile(dataurl, filename) {
|
var arr = dataurl.split(","),
|
mime = arr[0].match(/:(.*?);/)[1],
|
bstr = atob(arr[1]),
|
n = bstr.length,
|
u8arr = new Uint8Array(n);
|
while (n--) {
|
u8arr[n] = bstr.charCodeAt(n);
|
}
|
return new File([u8arr], filename, { type: mime });
|
},
|
uploadFileHandle(f) {
|
this.dialogVisible = true;
|
this.option.img = URL.createObjectURL(f.file);
|
},
|
finishCofirm() {
|
this.$refs.cropper.getCropData((obj) => {
|
const timer = new Date().getTime();
|
const urldata = this.dataURLtoFile(obj, timer + ".png");
|
let formData = new FormData();
|
formData.append("file", urldata);
|
this.btnLoading = true;
|
this.$api.post("communitypartybuilding/uploadimage", formData, (e) => {
|
this.btnLoading = false;
|
this.fileImg = e;
|
this.$emit("updateBackImg", e);
|
this.dialogVisible = false;
|
});
|
});
|
},
|
deleteImgHandle() {
|
this.fileImg = "";
|
this.$emit("updateBackImg", "");
|
},
|
imgListCheck() {
|
this.$emit("listCheck");
|
},
|
},
|
};
|
</script>
|
|
<style scoped>
|
.activity-cover-content {
|
position: relative;
|
}
|
.fl-al {
|
display: flex;
|
align-items: center;
|
}
|
.img-shwo {
|
width: 100%;
|
height: 100%;
|
}
|
.fl-cen {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
.activity-cover {
|
width: 260px;
|
height: 154px;
|
border: 1px dashed #999;
|
background-color: rgb(235, 231, 231);
|
}
|
.img-check-btn {
|
color: #0f90cc;
|
cursor: pointer;
|
margin-top: 80px;
|
width: 78px;
|
height: 30px;
|
border-radius: 6px;
|
border: 1px solid #0f90cc;
|
}
|
.img-check-btn:hover {
|
color: #fff !important;
|
border: 1px solid red;
|
background-color: red;
|
}
|
.img-check-btn2:hover {
|
color: #fff !important;
|
border: 1px solid rgb(233, 93, 13);
|
background-color: rgb(233, 93, 13);
|
}
|
.cropper-content .cropper {
|
width: auto;
|
height: 500px !important;
|
}
|
.img-shwo-box {
|
position: relative;
|
width: 260px;
|
height: 154px;
|
}
|
.img-check-btn2 {
|
position: absolute;
|
left: 50%;
|
top: 50%;
|
margin-top: -15px;
|
margin-left: -39px;
|
color: #999;
|
cursor: pointer;
|
width: 78px;
|
height: 30px;
|
border-radius: 6px;
|
border: 1px solid #999;
|
}
|
</style>
|
