1.图片裁剪组件photoCut.vue
<template><div><div class="info-item"><div class="line"><div class="cropper-content"><div class="cropper" style="text-align: center"><div v-show="!option.img" class="uploadimg"><div style=" padding-top: 20px;"><i class="ic-upload-cloud iconfont"/></div><div style="line-height:22px;color:#79818B;margin-top: -33px">支持jpg、png格式的图片，大小不超过2M</div><div style="margin-top: 30px"><Button class="but" @click="newUpload">上传图片</Button><input type="file" id="uploads" :value="imgFile" style="position:absolute; clip:rect(0 0 0 0);"accept="image/png, image/jpeg,image/jpg" @change="uploadImg($event, 1)"></div></div><vueCropperv-show="option.img"ref="cropper":img="option.img":outputSize="option.size":outputType="option.outputType":info="option.info":full="option.full":canMove="option.canMove":canMoveBox="option.canMoveBox":canScale="option.canScale":original="option.original":autoCrop="option.autoCrop":autoCropWidth="option.autoCropWidth":autoCropHeight="option.autoCropHeight":fixedBox="option.fixedBox":centerBox="option.centerBox":enlarge="option.enlarge":mode="option.mode"@realTime="realTime"@imgLoad="imgLoad"></vueCropper></div><div class="yulanimg" style="position: relative"><div v-show="option.img"><div class="show-preview" :style="previewStyle1" style="top: -63px;left: -60px;"><div :style="previews.div" class="preview"><img v-show="option.img" :src="previews.url" :style="previews.img"></div></div><div class="show-preview" :style="previewStyle2" style="top: 29px;left: -60px;"><div :style="previews.div" class="preview"><img v-show="option.img" :src="previews.url" :style="previews.img"></div></div><div class="show-preview" :style="previewStyle3" style="top: 100px;left: -60px;"><div :style="previews.div" class="preview"><img v-show="option.img" :src="previews.url" :style="previews.img"></div></div></div><div v-show="!option.img"><div class="imgdiv1"></div><div class="imgdiv2"></div><div class="imgdiv3"></div></div><div class="show-preview"style="height: 40px;width: 100%;top: 296px;left: 0px;"><Button class="but" v-show="option.img" @click="newUpload">重新上传</Button><div v-show="!option.img" style="font-size:12px;line-height:22px;color:rgba(139,148,165,1);">预览</div></div></div></div></div><!--<input type="button" class="btn btn-blue" value="上传头像" @click="finish('blob')">--></div><div flex="main:center" style="margin: 30px 0px 0px;"><Button @click="cancel" class=" resetBtn" size="large" style="width: 76px">取消</Button><Button @click="finish('blob')" :loading="buttonLoading" type="primary" size="large" style="width: 76px">保存</Button></div></div></template><script>import {VueCropper} from 'vue-cropper'import {Button, Icon} from "view-design"import {uploadImg} from './api/index'export default {data() {return {buttonLoading:false,previewStyle1: {},previewStyle2: {},previewStyle3: {},headImg: '',//剪切图片上传crap: false,previews: {},option: {img: '',//裁剪图片的地址outputSize: 1, //剪切后的图片质量（0.1-1）outputType: 'png',//裁剪生成图片的格式info: true,//裁剪框的大小信息canScale: true,//图片是否允许滚轮缩放autoCrop: true,//是否默认生成截图框autoCropWidth: 250,//默认生成截图框宽度autoCropHeight: 250,//默认生成截图框高度//fixed是否开启截图框宽高固定比例true//fixedNumber截图框的宽高比例full: false,//输出原图比例截图 falsefixedBox: true,//固定截图框大小 不允许改变canMove: true,//上传图片是否可以移动canMoveBox: false,//截图框能否拖动original: false,//上传图片按照原始比例渲染centerBox: false,// centerBox截图框是否被限制在图片里面// high是否按照设备的dpr 输出等比例图片infoTrue: true, // 为展示真实输出图片宽高 false 展示看到的截图框宽高// maxImgSize限制图片最大宽度和高度enlarge: 0.5, //图片根据截图框输出比例倍数mode: 'contain'//图片默认渲染方式},fileName: '', //本机文件地址//downImg: '#',imgFile: '',//uploadImgRelaPath: '', //上传后的图片的地址（不带服务器域名）}},components: {VueCropper, Button, Icon},methods: {newUpload() {document.getElementById("uploads").click()},//上传图片（点击上传按钮）finish(type) {this.buttonLoading=trueif (!this.fileName) {this.buttonLoading=falsethis.$Message.info("请上传logo！")return}if (type === 'blob') {// 获取截图的blob数据this.$refs.cropper.getCropBlob((data) => {// let img = window.URL.createObjectURL(data)// this.model = true;// this.modelSrc = img;//裁剪后的图片显示// this.option.img = this.modelSrc;var forms = new FormData()forms.append('file', data)uploadImg(forms).then(res=>{this.buttonLoading=falseif (res.status == 200) {// this.$Message.success(res.message)this.$emit("uploaderSuccess", res.data.filePath)this.cancel()} else {this.$Message.error(res.message)}}).catch(res=>{this.buttonLoading=falsethis.$Message.error(res.message)})// axios.post(// "/bnd-admin/v1/file/uploadImage",// forms,// {//headers: {// 'Authorization': 'eyJ2ZXIiOiIxLjAiLCJ0eXAiOiIxIiwiZXB0IjoyLCJraWQiOiJlMDhhYzY2Mi02YWU2LTRiZjktYjlmNS1kYzdmZTMxZTdlMjQiLCJhbGciOiJFUzUxMiJ9.eyJpc3MiOiJVQUFDIiwiaWF0IjoxNTc5MDcyNTk3LCJuYmYiOjE1NzkwNzI1OTcsImF1ZCI6IldFQiIsInN1YiI6Ik5Eb2xSVFlsUWpFbFFVRWxSVFlsUWpRbE9FSXgifQ.AJrhGLNeHj1Csl-3FmkdnaahbLP2QveXkFVfr6GmV3IdFfLBXBK2_G8qn5_ljU_XqWAf5s0Pul1IcgOvzT4WKtuuAOS6bL_GVOEyiVu_oXmqhXxJfUt00FkIeUfEP3IwBEVK9cbYmhrc0a68bnLCEjGUbpj6gocPheZKzAM0XlxXZCob',// 'Content-Type': 'multipart/form-data'//}// }// ).then(res => {// if (res.data.status == 200) {//console.log(res)//// this.$Message.success("上传成功")//// this.$emit("uploaderSuccess", res.data.data.filePath)//// this.cancel()// } else {//this.$Message.error("上传失败1")// }//// }).catch(res => {// this.$Message.error("上传失败2")// });})} else {// 获取截图的base64 数据this.$refs.cropper.getCropData((data) => {this.model = true;this.modelSrc = data;})}},// 实时预览函数realTime(data) {var previews = data;this.previewStyle1 = {width: previews.w + "px",height: previews.h + "px",overflow: "hidden",margin: "0",transform: `scale(${80 / previews.w})`};this.previewStyle2 = {width: previews.w + "px",height: previews.h + "px",overflow: "hidden",margin: "0",transform: `scale(${60 / previews.w})`};//固定为40宽度this.previewStyle3 = {width: previews.w + "px",height: previews.h + "px",overflow: "hidden",margin: "0",transform: `scale(${40 / previews.w})`// zoom: 40 / previews.w};this.previews = data},cancel() {this.$emit("cnacelModal")},//选择本地图片uploadImg(e, num) {console.log('uploadImg',e.target.value);var _this = this;//上传图片var file = e.target.files[0]_this.fileName = file.name;if (!/\.(jpeg|jpg|png)$/.test(e.target.value)) {e.target.value=''this.$Message.info("只支持jpg、png、jpeg格式图片！")return}if (file.size / 1024 / 1024 > 2) {e.target.value=''this.$Message.info("图片不得大于2M！")return}var reader = new FileReader();reader.onload = (e) => {let data;if (typeof e.target.result === 'object') {// 把Array Buffer转化为blob 如果是base64不需要data = window.URL.createObjectURL(new Blob([e.target.result]))} else {data = e.target.result}if (num === 1) {_this.option.img = data} else if (num === 2) {_this.example2.img = data}}// 转化为base64// reader.readAsDataURL(file)// 转化为blobreader.readAsArrayBuffer(file);},imgLoad(msg) {console.log('imgLoad')console.log(msg)}},}</script><style scoped lang="less">/deep/ .ivu-btn > .ivu-icon {width: 14px;height: 14px;line-height: 1;}.resetBtn{margin-right: 16px;background:rgba(240,242,245,1);border: 1px solid rgba(240,242,245,1);color: #363A40;}.resetBtn:hover{background: #E5E6E8;}.ic-upload-cloud{color:#CDD6E1;font-size: 112px;}/deep/ .cropper-view-box {outline: 1px dashed white;}/deep/ span.cropper-view-box {margin-bottom: 16px;}/deep/ div.cropper-crop-box:after {content: '鼠标滚轮缩放图片大小，鼠标拖拽调整图片位置';color: white;font-size: 12px;white-space: nowrap;margin-top: 16px;}/deep/ .crop-info {display: none;}/deep/ .vue-cropper {background-image: none;}.but {color: #4183FA;border-color: white}.but:hover {background: #3473E7;color: white;}.uploadimg {width: 350px;height: 350px;background: rgba(248, 250, 255, 1);opacity: 1;}.yulanimg {margin-left: 2px;width: 128px;height: 350px;background: rgba(248, 250, 255, 1);opacity: 1;}.imgdiv1 {width: 80px;height: 80px;background: #DDDFE8;border-radius: 50%;border: 2px solid white;margin: 21px 0px 0px 25px;}.imgdiv2 {width: 60px;height: 60px;background: #DDDFE8;border-radius: 50%;border: 2px solid white;margin: 23px 0px 0px 34px;}.imgdiv3 {width: 40px;height: 40px;background: #DDDFE8;border-radius: 50%;border: 2px solid white;margin: 20px 0px 0px 45px;}.info {width: 720px;margin: 0 auto;.oper-dv {height: 20px;text-align: right;margin-right: 100px;a {font-weight: 500;&:last-child {margin-left: 30px;}}}.info-item {margin-top: 15px;label {display: inline-block;width: 100px;text-align: right;}.sel-img-dv {position: relative;.sel-file {position: absolute;width: 90px;height: 30px;opacity: 0;cursor: pointer;z-index: 2;}.sel-btn {position: absolute;cursor: pointer;z-index: 1;}}}}.cropper-content {display: flex;display: -webkit-flex;justify-content: flex-end;-webkit-justify-content: flex-end;.cropper {width: 350px;height: 350px;}.show-preview {width: 250px;height: 250px;position: absolute;flex: 1;-webkit-flex: 1;display: flex;display: -webkit-flex;justify-content: center;-webkit-justify-content: center;.preview {overflow: hidden;border-radius: 50%;border: 6px solid white;background: #DDDFE8;margin-left: 40px;}}}.cropper-content .show-preview .preview {margin-left: 0;}</style>
2.图片上传接口index.js文件
import axios from "axios"const $postImg = (url, data) => {return axios({method: 'post',url,data,headers: {'Content-Type': 'multipart/form-data' }})}export const uploadImg = (obj) => {return $postImg('图片上传路径', obj)}
