lsj-upload文件上传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源码解析

1. 创建html文件，利用input的accept选择文件（lsj-upload/hybrid/html/uploadFile.html）
   
2. 使用this.dom = plus.webview.create(path, this.id, styles,extras);将html文件以webView的形式嵌入到页面中。（lsj-upload/components/LsjFile.js）
   plus.webview文档
   
3. 在组件中创建文件上传的对象。
   
   调试过程：
4. 调试弹窗隐藏的时候，利用 plus.webview方法获取并移除webView
   • const currentWebview = plus.webview.currentWebview()
   • plus.webview.close(currentWebview)
   • 结果：报错
   • 原因：在（lsj-upload/components/lsj-upload.vue）组件中，插件作者在mounted创建的vebView文件上传，再次打开弹窗时候就获取不到这个页面了。
5. 利用 plus.webview方法获取并显示隐藏webView
   • plus.webview.hide(currentWebview)
   • plus.webview.show(currentWebview)
   • 结果：仅仅第一次显示隐藏有效，再次打开弹窗将无法点击，然后出现页面错误的提示
   • 原因：根据解决结果，在另外的页面plus.webview.currentWebview()处理webView页面应该还是有影响，那么就要尝试看看能不能处理lsj-upload组件
6. 在（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做了处理。