Bug Type: Component
Environment
- Vue Version:
3.2.45 - Element Plus Version:
2.2.30 - Browser / OS:
Google Chrome 111.0.5563.65 - Build Tool:
Webpack
Reproduction
Related Component
el-upload
Reproduction Link
Element Plus Playground
Steps to reproduce
*背景：封装了cropper裁剪组件，嵌在upload组件里，封装成新的上传图片upload-img组件。
*操作：当选择图片后裁剪组件的模态框打开的时候，尚未裁剪的图片未确定上传之前，底层页面中的upload组件的预览图已展示，并且是完整的图片，不是剪裁好的目标大小的图片。
What is Expected?
期望裁剪组件确定上传之前，底层的upload组件不提前显示未操作的图片，即beforeUpload禁止提前将图片的url传给组件并禁止显示。
What is actually happening?
封装了cropper裁剪组件，嵌在upload组件里，封装成新的上传图片upload-img组件，当点击上传后裁剪组件的模态框打开的时候，尚未裁剪的图片未确定上传之前，底层页面中的upload组件的预览图已上传，并且是未裁剪的图片，不是确定裁剪操作之后的图片。
Additional comments
(empty)
4条答案
按热度按时间ijnw1ujt1#
before-upload支持异步回调，内部是会await这个方法执行结束，你可以试试看2eafrhcq2#
before-upload支持异步回调，内部是会await这个方法执行结束，你可以试试看before-upload 返回Promise，在 pedding 状态时（并未执行 resolve），图片就已经出现在了预览框里，所以我认为正确的逻辑应该是在执行resolve之前，图片不应该出现在预览框里。
yqkkidmi3#
@ZXYforce 手动写一个添加框（样式可以直接cp组件自带的）在裁剪完成后手动调用upload控件的handleStart，传入裁剪后的file文件应该就可以，是否添加到队列全部由你控制
gxwragnw4#
before-upload 返回Promise，在 pedding 状态时（并未执行 resolve），图片就已经出现在了预览框里，所以我认为正确的逻辑应该是在执行resolve之前，图片不应该出现在预览框里。
认同哈