lsj-upload文件上传bug
环境:APP-PLUS需求:在uni-popup弹窗里点击按钮,上传pdf文件bug:关闭弹窗后,点击屏幕上之前弹窗里上传文件按钮的位置,仍然能打开文件选择代码:此贴仅针对该bug,不考虑文件上传过程
·
处理uniapp使用lsj-upload上传的bug
问题场景:
环境:APP-PLUS
需求:在uni-popup弹窗里点击按钮,上传pdf文件
插件:lsj-upload
bug:关闭弹窗后,点击屏幕上之前弹窗里上传文件按钮的位置,仍然能打开文件选择
代码:此贴仅针对该bug,不考虑文件上传过程
<template>
<uni-popup ref="popup" :is-mask-click="maskCilck">
<view class="popup-box">
<uni-title type="h2" title="文件上传" color="#f98d2b"></uni-title>
<scroll-view scroll-y class="middle-box">
<!-- #ifdef APP-PLUS -->
<lsj-upload ref="lsjUpload" :childId="childId" :option="option" formats="pdf" accept="pdf" :debug="false" instantly
:count="99" @uploadEnd="onuploadEnd" @progress="onprogress" @change="onchange" style="text-align: center;">
<button size="mini" type="primary" class="choose-btn">{{file.name?"重新选择附件":"选择附件"}}</button>
</lsj-upload>
<!-- #endif -->
</scroll-view>
<view class="bottom-box">
<button @tap="cancel" class="common-btn cancel-btn">取消</button>
<button @tap="confirm" class="common-btn">提交</button>
</view>
</view>
</uni-popup>
</template>
处理过程
v-if和v-show
调试:尝试使用v-if和v-show,在关闭弹窗的时候隐藏lsj-upload组件
结果:无效
width:0;
调试:在弹窗关闭的时候设置jsj-upload组件width: 0;
结果:无效
lsh-upload源码解析
- 创建html文件,利用input的accept选择文件(lsj-upload/hybrid/html/uploadFile.html)
- 使用this.dom = plus.webview.create(path, this.id, styles,extras);将html文件以webView的形式嵌入到页面中。(lsj-upload/components/LsjFile.js)
plus.webview文档 - 在组件中创建文件上传的对象。
调试过程: - 调试弹窗隐藏的时候,利用 plus.webview方法获取并移除webView
- const currentWebview = plus.webview.currentWebview()
- plus.webview.close(currentWebview)
- 结果:报错
- 原因:在(lsj-upload/components/lsj-upload.vue)组件中,插件作者在mounted创建的vebView文件上传,再次打开弹窗时候就获取不到这个页面了。
- 利用 plus.webview方法获取并显示隐藏webView
- plus.webview.hide(currentWebview)
- plus.webview.show(currentWebview)
- 结果:仅仅第一次显示隐藏有效,再次打开弹窗将无法点击,然后出现页面错误的提示
- 原因:根据解决结果,在另外的页面plus.webview.currentWebview()处理webView页面应该还是有影响,那么就要尝试看看能不能处理lsj-upload组件
- 在(lsj-upload/components/lsj-upload.vue)组件中发现
uni.$emit()
和uni.$on
语法- 在调试弹窗隐藏的时候,利用
$refs
获取组件调用全局事件总线 - this.$refs.lsjUpload?.hide()
- this.$refs.lsjUpload?.show()
- 结果:bug解决
- 在调试弹窗隐藏的时候,利用
疑惑
按理说,如果plus.webview.create的层级最高,在关闭弹窗的时候就应该也能看见按钮,但是并没有,后来发现他在上传点击的按钮上面是html下的div下的input,实际点击的并不是自己代码里的上传按钮,而是html里的input,源码中用style和position做了处理。
更多推荐
所有评论(0)