装包
"vue-cropper": "0.5.5",
裁剪组件 CutImg.vue
<template><div><div class="user-info-head" @click="editCropper()"><imgv-if="options.img"v-bind:src="options.img"title="点击上传"style="width: 210px;height: 120px;border: 1px solid #ccc;border-radius: 4px;"/><divv-elsestyle="width: 210px;height: 120px;border: 1px solid #ccc;border-radius: 4px;"class="center"><i class="el-icon-plus avatar-uploader-icon"></i><div>点击上传</div></div></div><el-dialog:title="title":visible.sync="open"width="1400px"append-to-body@opened="modalOpened"@close="closeDialog"><el-row><el-col :span="24" :style="{ height: '750px' }"><vue-cropperref="cropper":img="options.img":info="true":autoCrop="options.autoCrop":autoCropWidth="options.autoCropWidth":autoCropHeight="options.autoCropHeight":fixedBox="options.fixedBox":outputType="options.outputType"@realTime="realTime"v-if="visible"/></el-col><!-- <el-col :span="4" :style="{ height: '350px' }"><div class="avatar-upload-preview"><img :src="previews.url" :style="previews.img" /></div></el-col> --></el-row><br /><el-row><el-col :lg="2" :sm="3" :xs="3"><el-uploadaction="#":http-request="requestUpload":show-file-list="false":before-upload="beforeUpload"><el-button size="small">选择<i class="el-icon-upload el-icon--right"></i></el-button></el-upload></el-col><el-col :lg="{ span: 1, offset: 2 }" :sm="2" :xs="2"><el-buttonicon="el-icon-plus"size="small"@click="changeScale(1)"></el-button></el-col><el-col :lg="{ span: 1, offset: 1 }" :sm="2" :xs="2"><el-buttonicon="el-icon-minus"size="small"@click="changeScale(-1)"></el-button></el-col><el-col :lg="{ span: 1, offset: 1 }" :sm="2" :xs="2"><el-buttonicon="el-icon-refresh-left"size="small"@click="rotateLeft()"></el-button></el-col><el-col :lg="{ span: 1, offset: 1 }" :sm="2" :xs="2"><el-buttonicon="el-icon-refresh-right"size="small"@click="rotateRight()"></el-button></el-col><el-col :lg="{ span: 2, offset: 6 }" :sm="2" :xs="2"><el-button type="primary" size="small" @click="uploadImg()">提 交</el-button></el-col></el-row></el-dialog></div>
</template><script>
import { VueCropper } from "vue-cropper";
import { uploadImg } from "@/api/system/user";
import { debounce } from "@/utils";export default {components: { VueCropper },props: ["url"],data() {return {open: false,visible: false,title: "剪裁单位图纸",options: {img: "", autoCrop: true, autoCropWidth: 1225, autoCropHeight: 700, fixedBox: true, outputType: "png", filename: "avatar", },previews: {},resizeHandler: null,};},watch: {url: {handler(val) {if (val) {this.options.img = process.env.VUE_APP_BASE_API + val;} else {this.options.img = "";}},immediate: true,},},methods: {editCropper() {this.open = true;},modalOpened() {this.visible = true;if (!this.resizeHandler) {this.resizeHandler = debounce(() => {this.refresh();}, 100);}window.addEventListener("resize", this.resizeHandler);},refresh() {this.$refs.cropper.refresh();},requestUpload() {},rotateLeft() {this.$refs.cropper.rotateLeft();},rotateRight() {this.$refs.cropper.rotateRight();},changeScale(num) {num = num || 1;this.$refs.cropper.changeScale(num);},beforeUpload(file) {if (file.type.indexOf("image/") == -1) {this.$modal.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");} else {const reader = new FileReader();reader.readAsDataURL(file);reader.onload = () => {this.options.img = reader.result;this.options.filename = file.name;};}},uploadImg() {this.$refs.cropper.getCropBlob((data) => {let formData = new FormData();formData.append("file", data);uploadImg(formData).then((response) => {this.open = false;this.options.img = process.env.VUE_APP_BASE_API + response.fileName;this.visible = false;this.$emit("update", response.fileName);});});},realTime(data) {this.previews = data;},closeDialog() {this.visible = false;window.removeEventListener("resize", this.resizeHandler);},},
};
</script>
<style scoped lang="scss">
.user-info-head {position: relative;display: inline-block;height: 120px;
}
::v-deep .el-dialog .el-dialog__body {padding: 0 20px 20px 20px !important;
}
::v-deep .el-dialog:not(.is-fullscreen) {margin-top: 2vh !important;
}
.user-info-head:hover:after {content: "+";text-align: center;position: absolute;left: 0;right: 0;top: 0;bottom: 0;color: #eee;background: rgba(0, 0, 0, 0.5);font-size: 24px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;cursor: pointer;height: 120px;line-height: 120px;
}
</style>
工具方法 debounce
export function debounce(func, wait, immediate) {let timeout, args, context, timestamp, resultconst later = function () {const last = +new Date() - timestampif (last < wait && last > 0) {timeout = setTimeout(later, wait - last)} else {timeout = nullif (!immediate) {result = func.apply(context, args)if (!timeout) context = args = null}}}return function (...args) {context = thistimestamp = +new Date()const callNow = immediate && !timeoutif (!timeout) timeout = setTimeout(later, wait)if (callNow) {result = func.apply(context, args)context = args = null}return result}
}
注册组件
import CutImg from "@/components/ququ/CutImg"
Vue.component('CutImg', CutImg)
新增弹窗使用组件
<!-- 添加或修改预案推演对话框 --><el-dialog :title="title" :visible.sync="open" width="500px" append-to-body><el-form ref="form" :model="form" :rules="rules" label-width="80px"><el-form-item label="预案名称" prop="planName"><el-inputv-model="form.planName"placeholder="请输入预案名称"maxlength="50"/></el-form-item><el-form-item label="单位名称" prop="unitName"><el-inputv-model="form.unitName"placeholder="请输入单位名称"maxlength="50"/></el-form-item><el-form-item label="单位图纸" prop="planImage"><!-- <ImageUpload v-model="form.planImage" :limit="1" :fileSize="10" /> --><CutImg :url="form.planImage" @update="handleUpload"></CutImg></el-form-item><el-form-item label="备注" prop="remark"><el-inputv-model="form.remark"type="textarea"placeholder="请输入内容"maxlength="200"/></el-form-item></el-form><div slot="footer" class="dialog-footer"><el-button type="primary" @click="submitForm">确 定</el-button><el-button @click="cancel">取 消</el-button></div></el-dialog>handleUpload(file) {this.form.planImage = file;},
