效果显示 引用vue-cropper
npm install vue-cropperyarn add vue-cropper
创建组件文件夹 上传按钮组件 index.vue
<template><div class="ant-upload-preview"><div style="width: 100%"><el-upload class="avatar-uploader" :show-file-list="false" action :before-upload="beforeUpload" :http-request="handleChange"><img v-if="imageUrl" :src="imageUrl" class="avatar" /><span v-else><i v-if="loading" class="el-icon-loading avatar-uploader-icon"></i><i v-else class="el-icon-plus avatar-uploader-icon"></i><span class="upload-desc">添加上传图片</span></span></el-upload></div><!-- modal --><cropper-modal ref="CropperModal" :imgType="imgType" @cropper-no="handleCropperClose" @cropper-ok="handleCropperSuccess"></cropper-modal></div></template><script>import CropperModal from './CropperModal'export default {name: 'ImageCropper',components: {CropperModal},props: {//图片裁切配置options: {type: Object,default: function() {return {autoCrop: true, //是否默认生成截图框autoCropWidth: 180, //默认生成截图框宽度autoCropHeight: 180, //默认生成截图框高度fixedBox: false, //是否固定截图框大小 不允许改变previewsCircle: true, //预览图是否是原圆形title: '修改头像'}}},// 上传图片的大小，单位MimgSize: {type: Number,default: 2},//图片存储在oss上的上级目录名imgType: {type: String,default: ''},// 图片地址imageUrl: {type: String,default: ''}},data() {return {loading: false,isStopRun: false}},methods: {//从本地选择文件handleChange(info) {if (this.isStopRun) {return}this.loading = trueconst {options } = thisconsole.log(info)this.getBase64(info.file, imageUrl => {const target = Object.assign({}, options, {img: imageUrl})this.$refs.CropperModal.edit(target)})},// 上传之前 格式与大小校验beforeUpload(file) {this.isStopRun = falsevar fileType = file.typeif (fileType.indexOf('image') < 0) {this.$message.warning('请上传图片')this.isStopRun = truereturn false}const isJpgOrPng =file.type === 'image/jpeg' ||file.type === 'image/png' ||file.type === 'image/jpg'if (!isJpgOrPng) {this.$message.error('你上传图片格式不正确!')this.isStopRun = true}const isLtSize = file.size < this.imgSize * 1024 * 1024if (!isLtSize) {this.$message.error('图片大小不能超过' + this.imgSize + 'MB!')this.isStopRun = true}return isJpgOrPng && isLtSize},//获取服务器返回的地址handleCropperSuccess(data) {//将返回的数据回显this.loading = falsethis.$emit('crop-upload-success', data)},// 取消上传handleCropperClose() {this.loading = falsethis.$emit('crop-upload-close')},getBase64(img, callback) {const reader = new FileReader()reader.addEventListener('load', () => callback(reader.result))reader.readAsDataURL(img)}}}</script><style lang="scss" scoped>.ant-upload-preview {background-color: #fff;.avatar-uploader {.upload-desc {position: absolute;bottom: 0;left: 0;color: #ccc;font-size: 8px;right: 0;}}}::v-deep .avatar-uploader .el-upload--text {border: 1px dashed #d9d9d9;border-radius: 6px;margin-right: 20px;cursor: pointer;position: relative;overflow: hidden;}::v-deep .avatar-uploader .el-upload:hover {border-color: #409eff;}::v-deep .avatar-uploader-icon {font-size: 22px;color: #ccc;width: 108px;height: 108px;line-height: 108px;text-align: center;}::v-deep.avatar {width: 108px;height: 108px;display: block;}</style>
模态框 CropperModal.vue
<template><el-dialog :visible.sync="visible" :title="options.title" :close-on-click-modal="false" width="800" @close="cancelHandel"><el-row><el-col :xs="24" :md="12" :style="{ height: '350px' }"><vue-cropper ref="cropper" :img="options.img" :info="true" :autoCrop="options.autoCrop" :autoCropWidth="options.autoCropWidth" :autoCropHeight="options.autoCropHeight" :fixedBox="options.fixedBox" @realTime="realTime"></vue-cropper></el-col><el-col :xs="24" :md="12" :style="{ height: '350px' }"><div :class="options.previewsCircle ? 'avatar-upload-preview' : 'avatar-upload-preview_range'"><img :src="previews.url" :style="previews.img" /></div></el-col></el-row><template slot="footer"><el-button size="mini" @click="cancelHandel">取消</el-button><el-button size="mini" type="primary" :loading="confirmLoading" @click="okHandel">保存</el-button></template></el-dialog></template><script>import {UpPic } from './index'import {VueCropper } from 'vue-cropper'export default {name: 'CropperModal',components: {VueCropper},props: {//图片存储在oss上的上级目录名imgType: {type: String,default: ''}},data() {return {visible: false,img: null,confirmLoading: false,options: {img: '', //裁剪图片的地址autoCrop: true, //是否默认生成截图框autoCropWidth: 180, //默认生成截图框宽度autoCropHeight: 180, //默认生成截图框高度fixedBox: true, //是否固定截图框大小 不允许改变previewsCircle: true, //预览图是否是原圆形title: '修改头像'},previews: {},url: {upload: '/sys/common/saveToImgByStr'}}},methods: {edit(record) {const {options } = thisthis.visible = truethis.options = Object.assign({}, options, record)},/*** 取消截图*/cancelHandel() {this.confirmLoading = falsethis.visible = falsethis.$emit('cropper-no')},/*** 确认截图*/okHandel() {const that = thisthat.confirmLoading = true// 获取截图的base64 数据this.$refs.cropper.getCropData(data => {UpPic({img_type: this.imgType,img_byte: data}).then(res => {that.$emit('cropper-ok', res)}).catch(err => {that.$message.error(err)}).finally(() => {that.cancelHandel()})})},//移动框的事件realTime(data) {this.previews = data}}}</script><style lang="scss" scoped>.avatar-upload-preview_range,.avatar-upload-preview {position: absolute;top: 50%;transform: translate(50%, -50%);width: 180px;height: 180px;border-radius: 50%;box-shadow: 0 0 4px #ccc;overflow: hidden;img {background-color: red;height: 100%;}}.avatar-upload-preview_range {border-radius: 0;}</style>
ajax网络接口 index.js
import request from '@/utils/request'const Api = {UpPic: '/getImage',}/*** 上传图片* @param parameter* @returns {*}*/export function UpPic(parameter) {return request({baseURL: 'https://www.fastmock.site/mock/f6273fce31c98c4d64fd82d91784712f/api',url: Api.UpPic,method: 'get',// params: parameter})}
使用组件
<template><div class="app-container"><el-form ref="form" label-width="130px" label-position="right" size="small" :rules="rules" :model="form"><el-form-item class="form-content" size="small" label="上传背景：" style="margin-top: 15px"><div><image-cropper :options="cropperOptions" :imgSize="3" :imgType="imgType" :imageUrl="imgUrl" @crop-upload-close="cropClose" @crop-upload-success="cropSuccess" /></div></el-form-item></el-form></div></template><script>import ImageCropper from '@/components/ImageCropper'export default {name: 'HomeBottomColumn',components: {ImageCropper },data() {return {cropperOptions: {autoCrop: true, //是否默认生成截图框autoCropWidth: 200, //默认生成截图框宽度autoCropHeight: 200, //默认生成截图框高度fixedBox: false, //是否固定截图框大小 不允许改变previewsCircle: false, //预览图是否是圆形title: '上传广告图片' //模态框上显示的标题},imgType: 'testUp', //图片存储在oss上的上级目录名imgUrl: '', //上传图片所得到的地址form: {},rules: {}}},methods: {//上传操作结束cropClose() {console.log('上传操作结束')},//上传图片成功cropSuccess(data) {this.imgUrl = data.data.avatarconsole.log(this.imgUrl)}}}</script><style lang="scss" scoped>.app-container {.form-content {margin: 0px;}}</style>
