vue-image-crop-upload裁剪工具使用踩坑

前言

 用户需要进行上传头像,且能够对头像图片进行裁剪，引入vue-image-crop-upload裁剪工具，查看其源码后，增加处理业务问题的解决方法。

自定义上传

 在该组件中，当点击保存按钮时才会触发其点击事件，也就是触发文档中所写的cropSuccess函数方法，则我们可以将上传方法定义在这个函数内，函数中传入的第一个参数就是其裁剪图片后所产生的base64编码，可以将base64编码转换为File类型(base64->blob->file)或者直接向后端传输base64编码即可。具体代码实现如下：

<template>
  <div class="personal_show_wrapper">
    <my-upload
      field="img"
      @crop-success="cropSuccess"
      v-model="show"
      :width="100"
      :height="100"
      img-format="png"
      :noSquare="true"
    ></my-upload>
  </div>
</template>
  data() {
    return {
      imgDataUrl: ''
    }
  },
  components: {
    'my-upload': myUpload,
  },
  methods: {
 	toggleShow() {
      this.show = !this.show
    },
    cropSuccess(imgDataUrl) {
      //获取其裁剪后的base64编码
      this.imgDataUrl = imgDataUrl
      //向后端发送传输其base64编码
 	  axios({
        method: 'POST',
        url: 'xxx',
        data:this.imgDataUrl
        .....
      })
    },
  },

解决多次上传，组件视图不更新

 使用其组件时，当用户已经上传过一次头像后，第二次重新再次点击组件触发上传弹窗，视图显示为上次未保存时的的视图。

 解决办法：在上传完成过后，将视图跳转到第一步，代码如下：

<template>
//加入ref
  <div class="personal_show_wrapper">
    <my-upload
      field="img"
      @crop-success="cropSuccess"
      v-model="show"
      :width="100"
      :height="100"
      img-format="png"
      :noSquare="true"
      ref="myUpload"
    ></my-upload>
  </div>
</template>
  data() {
    return {
      imgDataUrl: ''
    }
  },
  components: {
    'my-upload': myUpload,
  },
  methods: {
 	toggleShow() {
      this.show = !this.show
    },
    cropSuccess(imgDataUrl) {
      //获取其裁剪后的base64编码
      this.imgDataUrl = imgDataUrl
      //向后端发送传输其base64编码
 	  axios({
        method: 'POST',
        url: 'xxx',
        data:this.imgDataUrl
        .....
      })
      //调用其组件的方法，将其视图跳转到第一步
      this.$refs.myUpload.setStep(1)
    },
  },

 问题解决，有帮助的话就点个赞吧~