uni-app中h5平台uni.chooseImage会触发两次选择

发布于 1周前 作者 caililin 来自 Uni-App

uni-app中h5平台uni.chooseImage会触发两次选择

Harmonyos Next教程
1 回复

在uni-app中，如果在H5平台上使用uni.chooseImage方法时触发两次选择图片的情况，这通常是由于某些事件监听器被意外触发了两次。我们可以通过代码来确保uni.chooseImage只被调用一次，并且处理好事件回调逻辑。

首先，我们需要确保uni.chooseImage的调用是在一个合适的事件处理函数中，比如按钮点击事件。以下是一个简单的示例，展示了如何在按钮点击时调用uni.chooseImage，并确保它只被调用一次：

<template>
  <view>
    <button @click="chooseImage">选择图片</button>
    <view v-for="(image, index) in images" :key="index">
      <image :src="image" style="width: 100px; height: 100px; margin: 10px;"></image>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      images: []
    };
  },
  methods: {
    chooseImage() {
      uni.chooseImage({
        count: 9, // 默认9
        sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
        sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
        success: (res) => {
          // tempFilePath可以作为img标签的src属性显示图片
          const tempFilePaths = res.tempFilePaths;
          this.images = this.images.concat(tempFilePaths); // 将选择的图片添加到images数组中
          console.log('选择的图片路径：', tempFilePaths);
        },
        fail: (err) => {
          console.error('选择图片失败：', err);
        }
      });
    }
  }
};
</script>

<style>
/* 样式可以根据需要调整 */
</style>

在这个例子中，我们定义了一个chooseImage方法，该方法在按钮点击时被调用。uni.chooseImage的配置项中，我们指定了图片的数量、大小类型以及来源。在success回调中，我们将选择的图片路径添加到images数组中，并显示在页面上。

如果uni.chooseImage被触发了两次，可能的原因包括：

  1. 按钮点击事件被触发了两次：检查是否有其他代码（如父组件的事件监听）也在触发这个按钮的点击事件。
  2. 事件冒泡：确保没有其他元素或父元素上的事件监听器在捕获或冒泡阶段也调用了chooseImage。

如果以上代码和检查都没有解决问题，可以尝试在开发者工具中调试，查看chooseImage方法是否确实被调用了两次，并检查调用栈以找出问题的根源。

回到顶部