search

xyxiao001 / vue-cropper

A simple picture clipping plugin for vue
https://github.xyxiao.cn/vue-cropper/docs/vue3.html
MIT License
4.3k stars 695 forks source link

出现裁剪失败问题 #187

Closed heda20 closed 5 years ago

heda20 commented 5 years ago

初次裁剪成功！当清除数据重新加载页面就会出现裁剪失败，但是重新触发两次图片上传又可以进行裁剪！裁剪是自动裁剪

xyxiao001 commented 5 years ago

清除数据是什么意思，怎么清除的

heda20 commented 5 years ago

调用 this.$refs.cropper.refresh();方法，然后页面返回首页。再次跳到裁剪页面必须要触发两次上传照片后移动图片才能截取成功，第一上传图片，移动图片进行裁剪没有效果

xyxiao001 commented 5 years ago

你需要清空你上传的input数据 就是上传的input里面的file

heda20 commented 5 years ago

通过 let file= document.querySelector("#uploads"); file.outerHTML = file.outerHTML 清空file数据 还是不可以，只能通过判断 this.$refs.cropper.h，this.$refs.cropper.w值是否等于0，等于0 重新赋值才裁剪成功

xyxiao001 commented 5 years ago

需要确认的是，图片有没有赋值到组件里面，看看是不是上传过程的问题

xyxiao001 commented 5 years ago

那就很可能是传递出了问题

heda20 commented 5 years ago

我通过vue devtools 查看porps 发现有出现img 为空的现象 ，但是我在传值前打印数据是有的，不过img如果没有值的话是不会出现图片的。问题是图片出来了，但是裁剪框宽高没有

xyxiao001 commented 5 years ago

如果你传递的值为空，组件默认是不会初始化的。保留之前状态

heda20 commented 5 years ago

我通过vue devtools 查看组件里的值img是空值，而且我也调用了this.$refs.cropper.refresh(); 应该不会出现你说的情况吧