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

Vue.js 同时被 2 个专栏收录
12 篇文章 0 订阅
6 篇文章 0 订阅

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)
    },
  },

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

  • 1
    点赞
  • 7
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

©️2021 CSDN 皮肤主题: 1024 设计师:白松林 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值