uni-app 页面两个u-upload组件会同时触发两个选择弹框

uni-app 页面两个u-upload组件会同时触发两个选择弹框

产品分类：

uniapp/App

PC开发环境操作系统：

Windows

PC开发环境操作系统版本号：

win10

HBuilderX类型：

正式

HBuilderX版本号：

3.1.18

手机系统：

全部

手机系统版本号：

Android 10

手机厂商：

华为

页面类型：

vue

打包方式：

云端

项目创建方式：

HBuilderX

App下载地址或H5网址：

https://vkceyugu.cdn.bspapp.com/VKCEYUGU-35cb40df-1e16-47bb-b71c-c7bbe32784ca/4be43b34-9b11-432b-87e5-7752668eff96.apk

测试过的手机：

苹果和VIVO

示例代码：

<u-upload @on-success="upImgCallBack1" @on-choose-complete="uploadImg1()" :max-count="1" name="file" upload-text="您可以选择上传二维码(一张)" del-bg-color="#dcdcdc" :auto-upload="true" :action="actionUrl" :header="header" :multiple="false" :file-list="toarray(data.qrcode)" ref="upload"></u-upload>  
<u-upload @on-success="upImgCallBack" @on-remove="onRemove(index)" @on-choose-complete="uploadImg(index)" :max-count="3" name="file" upload-text="最多三张" del-bg-color="#dcdcdc" :auto-upload="true" :action="actionUrl" :header="header" :multiple="false" :file-list="toarray(item.stepImage)"  ref="upload"></u-upload>

操作步骤：

登录后点击我的–发布/管理任务–发布任务–任意分类–第一页资料任意填写–下一步 点击添加步骤
此时页面就同时出现了两个u-upload的情况(并不是每次点击都会出现两个弹框,偶尔会出现,概率比较大)

预期结果：

同时只出现一个弹框

实际结果：

点击选择图片,同时出现两个弹框

bug描述：

一个页面出现两个或两个以上的u-upload 后, 点击选择图片, 可以会同时弹出 拍摄+从相册选择 如果点的不是对应的那个, 就会导致APP直接崩溃


更多关于uni-app 页面两个u-upload组件会同时触发两个选择弹框的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app 页面两个u-upload组件会同时触发两个选择弹框的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的组件事件冒泡导致的冲突问题。当页面中存在多个u-upload组件时，点击事件可能会同时触发多个组件的选择弹框。

问题原因：

  1. u-upload组件内部的选择按钮事件没有正确阻止冒泡
  2. 多个组件的事件监听器同时响应了点击事件
  3. 组件引用ref重复（代码中两个组件都使用了ref="upload"）

解决方案：

  1. 修复ref重复问题：
<u-upload ref="upload1" ... />
<u-upload ref="upload2" ... />
  1. 使用v-if控制组件显示： 如果第二个u-upload是在某个条件下显示的，确保使用v-if而不是v-show：
<u-upload v-if="showSecondUpload" ... />
  1. 手动触发选择： 通过ref手动调用选择方法，避免直接点击：
// 为每个上传按钮绑定不同的事件
chooseImage1() {
    this.$refs.upload1.chooseFile();
},
chooseImage2() {
    this.$refs.upload2.chooseFile();
}
回到顶部