Vue+iview图片裁剪上传 vue-cropper

需求：
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 -Save

将上传图片组件化，方便在父组件使用

子组件名为 UploadHeadImg.vue 代码如下

<template><div><Modal
      v-model="modal1"
      title="操作图片":loading="loading"
      @on-ok="uploadAvatar"><div class="cropper"><vueCropper
          ref="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><Upload
      ref="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";exportdefault{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(newBlob([file]));this.option.img = data;this.modal1 =true;returnfalse;//取消自动上传},uploadAvatar(){let that =this;this.$refs.cropper.getCropBlob((data)=>{
        that.loading =true;
        that.$refs.upload.clearFiles();let formData =newFormData();
        formData.append("file", data);let file = formData.get("file");// 转为 base64let reader =newFileReader();
        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'exportdefault{name:'ClientHome',components:{
        UploadHeadImg
    },data(){return{};},methods:{getFormdata(v){
            console.log(v);// 子组件自定义事件传过来的formData，后续用来上传到后端}},};</script><style lang="scss" scoped></style>

以上就是全部代码了，对你有帮助的话记得点赞收藏哦