uni-app uni-file-picker 组件 电脑端小程序点击无弹出文件选择

组件内部使用的是小程序的api(chooseMedia)，可以向小程序社区反馈 。

在使用 uni-app 的 uni-file-picker 组件时，如果在电脑端小程序中点击没有弹出文件选择框，可能是由于以下原因导致的：

1. 平台兼容性问题

uni-file-picker 组件在不同平台上的表现可能有所不同。特别是在电脑端小程序中，可能存在兼容性问题。你可以检查一下当前使用的是哪个小程序平台（如微信小程序、支付宝小程序等），并查阅对应平台的文档，确认是否支持 uni-file-picker 组件。

2. 权限问题

确保小程序有权限访问文件系统。在微信小程序中，你需要在小程序的 app.json 文件中配置 chooseFile 权限：

{
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示"
    },
    "scope.writePhotosAlbum": {
      "desc": "你的相册信息将用于小程序保存图片的效果展示"
    },
    "scope.chooseFile": {
      "desc": "你的文件信息将用于小程序选择文件的效果展示"
    }
  }
}

3. 事件绑定问题

确保你已经正确绑定了 @success 或 @change 事件处理函数。例如：

<template>
  <uni-file-picker @success="handleSuccess" @change="handleChange"></uni-file-picker>
</template>

<script>
export default {
  methods: {
    handleSuccess(e) {
      console.log('文件选择成功', e);
    },
    handleChange(e) {
      console.log('文件选择变化', e);
    }
  }
}
</script>

4. 使用 uni.chooseFile API

如果 uni-file-picker 组件在电脑端小程序中无法正常工作，你可以直接使用 uni.chooseFile API 来实现文件选择功能。例如：

<template>
  <button [@click](/user/click)="chooseFile">选择文件</button>
</template>

<script>
export default {
  methods: {
    chooseFile() {
      uni.chooseFile({
        count: 1, // 最多可以选择的文件数量
        success: (res) => {
          console.log('文件选择成功', res.tempFiles);
        },
        fail: (err) => {
          console.error('文件选择失败', err);
        }
      });
    }
  }
}
</script>