使用ElemnetUi的上传组件搭配vue-cropper实现上传图片的裁剪
网上搜到的代码 缺胳膊少腿 很多坑
HTML
<template><div class='demo'><!-- element 上传图片按钮 --><el-uploadclass="avatar-uploader"action="":show-file-list="false":auto-upload="false":on-change='changeUpload'><img v-if="banner" :src="banner" class="avatar"><i v-else class="el-icon-plus avatar-uploader-icon"></i></el-upload><!-- vueCropper 剪裁图片实现--><el-dialog title="图片剪裁" :visible.sync="dialogVisible" append-to-body><div class="cropper-content"><div class="cropper" style="text-align:center"><vueCropperref="cropper":img="option.img":outputSize="option.size":outputType="option.outputType":info="true":full="option.full":canMove="option.canMove":canMoveBox="option.canMoveBox":original="option.original":autoCrop="option.autoCrop":fixed="option.fixed":fixedNumber="option.fixedNumber":centerBox="option.centerBox":infoTrue="option.infoTrue":fixedBox="option.fixedBox"@realTime="realTime"></vueCropper></div></div><div slot="footer" class="dialog-footer"><el-button @click="dialogVisible = false">取 消</el-button><el-button type="primary" @click="finish" :loading="loading">确认</el-button></div></el-dialog></div></template>
script
<script>import {client } from '@api/newApi.js'export default {data() {return {// 裁剪组件的基础配置optionoption: {img: '', // 裁剪图片的地址info: true, // 裁剪框的大小信息outputSize: 0.8, // 裁剪生成图片的质量outputType: 'jpeg', // 裁剪生成图片的格式canScale: false, // 图片是否允许滚轮缩放autoCrop: true, // 是否默认生成截图框// autoCropWidth: 300, // 默认生成截图框宽度// autoCropHeight: 200, // 默认生成截图框高度fixedBox: true, // 固定截图框大小 不允许改变fixed: true, // 是否开启截图框宽高固定比例fixedNumber: [10.8, 1.6], // 截图框的宽高比例full: true, // 是否输出原图比例的截图canMoveBox: false, // 截图框能否拖动original: false, // 上传图片按照原始比例渲染centerBox: false, // 截图框是否被限制在图片里面infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高},dialogVisible: false,//裁剪弹窗loading: false, //裁剪请求loading按钮fileinfo:[], //接收element上传前的file类型数据banner:'',//裁剪后的url}},methods: {// 实时预览函数 realTime(data) {this.previews = data },// 上传按钮 限制图片大小changeUpload(file, fileList) {const isLt5M = file.size / 1024 / 1024 < 5if (!isLt5M) {this.$message.error('上传文件大小不能超过 5MB!')return false}//这边将file类型的文件赋值给fileinfothis.fileinfo = file.rawconsole.log(this.fileinfo)let res = URL.createObjectURL(this.fileinfo)console.log(res)// 上传成功后将图片地址赋值给裁剪框显示图片this.$nextTick(() => {this.option.img = resthis.dialogVisible = true})},// 点击裁剪，这一步是可以拿到处理后的地址finish() {this.$refs.cropper.getCropBlob((data) => {//裁剪图片后的blod数据let file = new File([data], this.fileinfo.name, {type: this.fileinfo.type, lastModified: Date.now()});let formData = new FormData()formData.append('groupId',this.$cookies.get("CookieGroupId"))formData.append('file',file)this.loading = trueclient(formData).then(res=>{this.banner = res.data.data.urlthis.loading = falsethis.dialogVisible = false})})}}}</script>
css
<style lang='scss' rel='stylesheet/scss'>// 截图 样式给不上会出现NAN*NAN的情况.cropper-content {.cropper {width: auto;height: 300px;}}.demo{.avatar-uploader{display: flex;align-items: center;.el-upload {float: left;border: 1px dashed #d9d9d9;border-radius: 6px;cursor: pointer;position: relative;overflow: hidden;.avatar-uploader-icon {font-size: 28px;color: #8c939d;width: 178px;height: 178px;line-height: 178px;text-align: center;}}.el-upload:hover {border-color: #409EFF;}.el-upload:hover {border-color: #409EFF;}}.avatar {width: 521px;height: 77px;display: block;}}</style>
