van-uploader组件动态设置capture属性不生效问题

不锋2025-06-11 18:35

最近在使用van-uploader做一个上传图片的功能的时候，因为需求需要让用户可以选择相机还是相册上传。就是点击上传按钮时弹出以下这种弹窗。

html 复制代码

<van-popup
  position="bottom"
  :style="{ height: '150px' }"
  v-model="showSelect"
>
  <div class="buttom-pop">
    <div class="select">
      <p @click="chooseFile('camera')">Camera</p>
      <p @click="chooseFile(false)">Album</p>
    </div>
  </div>
</van-popup>

使用时点击上传的图片，会弹出上面的popup。

ruby 复制代码

<van-uploader ref="uploaderRef" v-model="fileList" :after-read="afterRead" :capture="capture">
    <div class="upload-icon" @click="showSelect = true" >
    </div>
</van-uploader>

点击popup中的选项时，去切换capture。

typescript 复制代码

chooseFile(type) {

      this.capture = type; // 设置上传方式

      console.log('选择上传方式', type)

      this.showSelect = false; // 关闭选择上传方式弹框

      // 这里使用 $nextTick 确保 DOM 更新后再调用 chooseFile 方法

      // 这是因为capture属性的设置需要在 DOM 更新后才能被真正设置，使用chooseFile方法时对应的capture属性才会生效

      this.$nextTick(() => {

        this.$refs.uploaderRef.chooseFile(); // 调用van-uploader的chooseFile方法

      });

    }

初始加载时，capture设置为''。然后就发现一个问题，就是不管怎么改capture，实际上会一直是相机。但是如果不动态配置capture，则可以唤起相册。

后来研究了一下，发现具体原因是在修改capture时，没有等到dom完全更新就调用chooseFile了。所以这里加一下$nextTick后去调用chooseFile就可以了。

究其原因，还是因为更新视图时，是异步的，直接调用van-uploader组件中的chooseFile时，capture的值并没有被更新就调用了。所以浏览器识别就会一直是相机。