uni-app chooseVideo、chooseImage、chooseFile 功能报Bug

uni-app chooseVideo、chooseImage、chooseFile 功能报Bug

开发环境 版本号 项目创建方式
Windows win10 HBuilderX 
## 示例代码：

```javascript
uni.chooseFile({
success(res) {
console.log(res);
},
fail(err) {
console.log(err);
}
})

操作步骤：

uni.chooseFile({
success(res) {
console.log(res);
},
fail(err) {
console.log(err);
}
})
正常调用

预期结果：

能够正常选择或录制

实际结果：

报错 { errMsg: “chooseFile:fail 文件选择器对话框只能在用户激活时显示” }

bug描述：

所有浏览器所有版本

uni.chooseFile({  
success(res) {  
console.log(res);  
},  
fail(err) {  
console.log(err);  
}  
})

都会返回以下错误信息，导致应用无法使用 { errMsg: “chooseFile:fail 文件选择器对话框只能在用户激活时显示” }


更多关于uni-app chooseVideo、chooseImage、chooseFile 功能报Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

14 回复

chooseImage我刚才在谷歌浏览器上试了下，win10系统，没啥问题

更多关于uni-app chooseVideo、chooseImage、chooseFile 功能报Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


我的有问题，我切换版本都不行，手机上，windows上都有问题

3.2.16 和 3.2.15都不行

回复 蛋炒太阳: 之前可以用吗？

这我刚上传的

恩，Hbuilder什么版本

回复 蛋炒太阳: 3.2.16

回复 蛋炒太阳: 最新版本

回复 蛋炒太阳: 你要不把编辑器卸载重装一下试试，可能有啥依赖丢失

回复 2***@qq.com: 有道理，我再试试

回复 2***@qq.com: 重新安装整个环境都不行

把uni.chooseFile放到mouseup的回调函数中调用，这样可以绕过uni内部检测机制，可以异步调用chooseVideo、chooseImage、chooseFile。 只在HBuilderX 3.2.16中进行了测试。因为项目中目前只能在异步回调中调用chooseImage这些接口，如果要改造成同步调用，改造起来比较麻烦，所以使用了下面的代码workaround了一下。 invoke(func) {
const mock = new MouseEvent(‘mouseup’)
const callback = ()=>{
func()
document.removeEventListener(‘mouseup’, callback )
}
document.addEventListener(‘mouseup’, callback )
document.dispatchEvent(mock)
},
chooseFile(success, fail) {
this.invoke(()=>{
uni.chooseFile({
success,
fail
})
})
},

哈，这个可以试试哈？这两天验证一下

这个错误是由于浏览器的安全策略导致的。chooseFile、chooseImage、chooseVideo 等文件选择 API 必须在用户主动触发的交互事件（如点击）中调用，而不能在页面加载、异步回调等非用户直接操作的环境中直接执行。

问题原因： 浏览器为了防止恶意脚本自动弹出文件选择对话框，要求文件选择器必须由用户手势（如 click、tap 等）触发。你的代码可能是在页面初始化、定时器或异步请求回调中直接调用了 uni.chooseFile，此时浏览器认为这不是用户主动触发的操作，因此抛出错误。

解决方案： 确保 uni.chooseFile 在用户点击事件中调用。例如：

// 正确示例：在按钮点击事件中调用
<template>
  <button [@click](/user/click)="handleChooseFile">选择文件</button>
</template>

<script>
export default {
  methods: {
    handleChooseFile() {
      uni.chooseFile({
        success(res) {
          console.log(res);
        },
        fail(err) {
          console.log(err);
        }
      });
    }
  }
}
</script>
回到顶部