需求： 1.选择图片 2.裁剪图片 3.裁剪后的图片回显
设计思路： 1.选择图片后使用vue-cropper插件进行裁剪 2.裁剪后通过this.$refs.cropper.getCropBlob((data) => {})方法将图片转成formData 3.将formData通过FileReader对象转成base64渲染达到回显效果 4.将formData传递给父组件
效果图
接下来就是代码了
首先安装iview，怎么安装就看文档去把，我的iview版本为2.14.3
安装 vue-cropper
npm i vue-cropper
将上传图片组件化，方便在父组件使用
子组件名为UploadHeadImg.vue代码如下
<template><div><Modalv-model="modal1"title="操作图片":loading="loading"@on-ok="uploadAvatar"><div class="cropper"><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"></vueCropper></div><!--cropper--></Modal><Uploadref="upload":show-upload-list="false":format="['jpg', 'jpeg', 'png']":max-size="2048":before-upload="handeleBeforeUpload"type="drag"accept="image/*"action=""class="upload-box"><div class="upload-icon" v-show="!imgSrc"><Icon type="ios-camera" size="40"></Icon></div><div class="upload-icon" v-show="imgSrc"><img class="upload-img" :src="imgSrc" alt="" /></div></Upload></div></template><script>import {VueCropper } from "vue-cropper";export default {name: "UploadHeadImg",components: {VueCropper,},data() {return {modal1: false,imgSrc: "",option: {img: "", // 裁剪图片的地址info: true, // 裁剪框的大小信息outputSize: 0.8, // 裁剪生成图片的质量outputType: "png", // 裁剪生成图片的格式canScale: false, // 图片是否允许滚轮缩放autoCrop: true, // 是否默认生成截图框// autoCropWidth: 300, // 默认生成截图框宽度// autoCropHeight: 200, // 默认生成截图框高度fixedBox: true, // 固定截图框大小 不允许改变fixed: true, // 是否开启截图框宽高固定比例fixedNumber: [1, 1], // 截图框的宽高比例full: true, // 是否输出原图比例的截图canMoveBox: false, // 截图框能否拖动original: false, // 上传图片按照原始比例渲染centerBox: false, // 截图框是否被限制在图片里面infoTrue: true, // true 为展示真实输出图片宽高 false 展示看到的截图框宽高},fileinfo: "",// 防止重复提交loading: false,};},mounted() {},methods: {handeleBeforeUpload(file) {this.fileinfo = file;let data = window.URL.createObjectURL(new Blob([file]));this.option.img = data;this.modal1 = true;return false; //取消自动上传},uploadAvatar() {let that = this;this.$refs.cropper.getCropBlob((data) => {that.loading = true;that.$refs.upload.clearFiles();let formData = new FormData();formData.append("file", data);let file = formData.get("file");// 转为 base64let reader = new FileReader();reader.onload = function () {// base64结果that.imgSrc = this.result;that.loading = false;};reader.readAsDataURL(file);that.$emit('getFormdata', file);});},},};</script><style lang="scss" scoped>.cropper {width: auto;height: 300px;}.upload-box {margin: 20px;display: inline-block;::v-deep .ivu-upload.ivu-upload-drag{border: 1px dashed #999 !important;}}.upload-box,.upload-icon,.upload-img {width: 120px;height: 120px;}.upload-icon {display: flex;align-items: center;justify-content: center;}</style>
子组件写好了之后就到父组件使用了
父组件代码如下
<template><div><UploadHeadImg @getFormdata="getFormdata"></UploadHeadImg></div></template><script>import UploadHeadImg from '@/components/UploadHeadImg.vue'export default {name: 'ClientHome',components:{UploadHeadImg},data() {return {};},methods: {getFormdata(v){console.log(v); // 子组件自定义事件传过来的formData，后续用来上传到后端}},};</script><style lang="scss" scoped></style>
以上就是全部代码了，对你有帮助的话记得点赞收藏哦
