裁切组件的封装----需要安装vue-cropper
<template> <div :class="$options.name" > <el-dialog class="dialog" :visible.sync="dialogVisible" width="600px" :before-close="handleClose" :modal="false" > <div class="cropper-container"> <div class="cropper-el"> <vue-cropper ref="cropper" :img="cropperImg" :output-size="option.size" :output-type="option.outputType" :info="true" :full="option.full" :can-move="option.canMove" :can-move-box="option.canMoveBox" :fixed-box="option.fixedBox" :original="option.original" :auto-crop="option.autoCrop" :auto-crop-width="option.autoCropWidth" :auto-crop-height="option.autoCropHeight" :center-box="option.centerBox" :high="option.high" :info-true="option.infoTrue" @realTime="realTime" :enlarge="option.enlarge" :fixed="option.fixed" :fixed-number="option.fixedNumber" /> </div> <!-- 预览 --> <div class="prive-el"> <div class="prive-style" :style="{'width': '150px', 'height': '266px', 'overflow': 'hidden', 'margin': '0 25px', 'display':'flex', 'align-items' : 'center'}"> <div class="preview" :style="previews.div"> <img :src="previews.url" :style="previews.img"> </div> </div> <el-button @click="uploadBth" v-if="option.img">重新上传 </el-button> </div> </div> <span slot="footer" class="dialog-footer"> <el-button @click="handleClose">取 消</el-button> <el-button type="primary" @click="saveImg" >确 定</el-button> </span> </el-dialog> </div> </template> <script> import { VueCropper } from 'vue-cropper' export default { name: 'Cropper', components: { VueCropper }, props: { dialogVisible: { type: Boolean, default: false }, imgType: { type: String, default: 'blob' }, cropperImg: { type: String, default: '' }, width:Number, height: Number }, data () { return { previews: {}, option: { img: '', // 裁剪图片的地址 size: 1, // 裁剪生成图片的质量 full: false, // 是否输出原图比例的截图 默认false outputType: 'png', // 裁剪生成图片的格式 默认jpg canMove: false, // 上传图片是否可以移动 fixedBox: false, // 固定截图框大小 不允许改变 original: false, // 上传图片按照原始比例渲染 canMoveBox: true, // 截图框能否拖动 autoCrop: true, // 是否默认生成截图框 // 只有自动截图开启 宽度高度才生效 autoCropWidth: 160, // 默认生成截图框宽度 autoCropHeight: 90, // 默认生成截图框高度 centerBox: true, // 截图框是否被限制在图片里面 high: false, // 是否按照设备的dpr 输出等比例图片 enlarge: 1, // 图片根据截图框输出比例倍数 mode: 'contain', // 图片默认渲染方式 maxImgSize: 2000, // 限制图片最大宽度和高度 // limitMinSize: [100, 120], // 更新裁剪框最小属性 infoTrue: false, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高 fixed: true, // 是否开启截图框宽高固定比例 (默认:true) fixedNumber: [this.width,this.height] // 截图框的宽高比例 }, } }, methods: { // 裁剪时触发的方法,用于实时预览 realTime (data) { this.previews = data }, // 重新上传 uploadBth () { this.$emit('update-cropper') }, // 取消关闭弹框 handleClose () { this.$emit('colse-dialog', false) }, // 获取裁剪之后的图片,默认blob,也可以获取base64的图片 saveImg () { if (this.imgType === 'blob') { this.$refs.cropper.getCropBlob(data => { this.$emit('upload-img', data) }) } else { this.$refs.cropper.getCropData(data => { this.uploadFile = data this.$emit('upload-img', data) }) } } } } </script> <style lang="scss" scoped> .Cropper { .cropper-el { height: 300px; width: 300px; } .cropper-container { display: flex; justify-content: space-between; .prive-el { height: 164px; width: 94px; flex: 1; text-align: center; .prive-style { flex: 1; -webkit-flex: 1; display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; overflow: hidden; background: #ededed; margin: 0 auto 0 40px; } .preview { overflow: hidden; } .el-button { margin-top: 20px; } } } } </style>
上传组件的封装
<template> <div :class="$options.name"> <el-upload :on-remove="handleRemove" v-show="!resultImg" class="upload-el" accept="image/*" ref="fileUpload" name="pic" :action="action" :data="uploadData" :on-change="selectChange" :show-file-list="false" :auto-upload="false" :http-request="httpRequest"> <img :src="image" v-if="judgeId!==0" class="edit-image"> <div v-if="judgeId!==0" class="update-img-desc">* 点击图片进行重新选择编辑!</div> <div v-if="judgeId===0"> <span class="icon upload-icon"/> <el-button class="choose-button">选择图片</el-button> </div> </el-upload> <figure v-show="resultImg" class="result-img"> <img :src="resultImg" @click="updateCropper"> <div v-if="resultImg" class="update-img-desc">*点击图片进行重新上传新图片!</div> </figure> <cropper v-if="showCropper" :dialog-visible="showCropper" :cropper-img="cropperImg" @update-cropper="updateCropper" @colse-dialog="closeDialog" @upload-img="uploadImg" :width="width" :height="height" /> </div> </template> <script> import Cropper from './Cropper.vue' export default { name: 'UploadImg', components: { Cropper }, props: { width: Number, height: Number, //判断父组件点击的是添加还是编辑 judgeId: Number, //向父组件获取点击编辑按钮时的图片URL image: String }, data () { return { uploadData: { // 上传需要的额外参数 siteId: 1, source: 1, fileName: '' }, action: 'http://106.13.150.219:8090/api/Common/CommonMethod/PostUploadImage', // 上传地址,必填 cropperImg: '', // 需要裁剪的图片 showCropper: false, // 是否显示裁剪框 uploadFile: '', // 裁剪后的文件 resultImg: '' // 上传成功,后台返回的路径 } }, methods: { // submit 之后会触发此方法 httpRequest (request) { console.log('+++++++++++++') console.log(JSON.stringify(request)) //action:裁剪后的图片地址 //data:裁剪后的图片名称/图片数量/图片id //filename:图片名称 const { action, data, filename } = request // 新建formDate对象 let formData = new FormData() for (let key in data) { formData.append(key, data[key]) } // 文件单独push,第三个参数指定上传的文件名 formData.append(filename, this.uploadFile, data.fileName) //请求接口 this.axios({ headers: { contentType: 'multipart/form-data' // 需要指定上传的方式 }, url: action, method: 'post', data: formData, timeout: 200000000 // 防止文件过大超时 }).then((resp) => { this.$message.success('图片上传成功') this.resultImg = resp.Url + resp.Image // 上传成功后展示的图片 this.$emit('showImage', this.resultImg) }).catch(err => { console.log(err) }) }, // 选择文件 selectChange (file) { const { raw, name } = file this.openCropper(raw) this.uploadData.fileName = name }, /** * @param {file} 上传的文件 */ openCropper (file) { let files = file let isLt5M = files.size > (5 << 20) if (isLt5M) { this.$message.error('请上传5M内的图片') return false } let 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 } this.cropperImg = data } // 转化为base64 // reader.readAsDataURL(file) // 转化为blob reader.readAsArrayBuffer(files) this.showCropper = true }, // 上传图片 uploadImg (file) { this.uploadFile = file this.$refs.fileUpload.submit() this.showCropper = false //提交后清空文件 this.$refs.fileUpload.clearFiles() }, // 更新图片 updateCropper () { this.$refs.fileUpload.$children[0].$el.click() }, // 关闭窗口 closeDialog () { this.showCropper = false }, handleRemove (file, fileList) { console.log(file) console.log(fileList) }, } } </script> <style lang="scss" scoped> .UploadImg { .el-upload { display: block; width: 100px; margin: 30px auto 0; } .upload-icon { display: block; height: 44px; width: 52px; background-image: url(~@/assets/img/upload-image.png); background-position: 100% 100%; margin: 0 auto 20px; } .video-image { display: flex; } .result-img img { height: 90px; width: 160px; } } .edit-image { height: 90px; width: 160px; } .choose-button { margin-top: 10px; } .update-img-desc { color: #DC143C !important; font-size: 12px !important; font-weight: bold !important; } </style>
使用
//引入封装好的图片上传+裁剪的组件 import UploadImg from '../../../components/base/uploadPictures/UploadImg'
components: { UploadImg },
<upload-img @showImage="showImage" class="image-style" :width="16" :height="9" :judge-id="judgeId" :image="form.Image" > </upload-img>