vue-image-crop-upload裁剪工具使用踩坑
前言 用户需要进行上传头像,且能够对头像图片进行裁剪,引入vue-image-crop-upload裁剪工具,查看其源码后,增加处理业务问题的解决方法。自定义上传 在该组件中,当点击保存按钮时才会触发其点击事件,也就是触发文档中所写的cropSuccess函数方法,则我们可以将上传方法定义在这个函数内,函数中传入的第一个参数就是其裁剪图片后所产生的base64编码,可以将base64编码转换为Fi
·
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)
},
},
问题解决,有帮助的话就点个赞吧~
更多推荐
已为社区贡献8条内容
所有评论(0)