uni-app 【报Bug】uni.chooseFile在手机h5端type=all时加extension后无法过滤

uni-app 【报Bug】uni.chooseFile在手机h5端type=all时加extension后无法过滤

示例代码：

uni.chooseFile({ count: 9, type: ‘al’, extension: [’.xml’,’.xls’,’.xlsx’,’.docx’,’.doc’,’.pptx’,’.ppt’,’.pdf’,’.txt’] })


在电脑端正常过滤，只能选择到extension指定的格式  
在手机端所有浏览器都只能选择到图片

## 操作步骤：


uni.chooseFile({
count: 9,
type: 'al',
extension: ['.xml','.xls','.xlsx']
})

预期结果：

type=all时加extension，按extension显示指定格式文件

实际结果：

type=all时加extension，只会显示图片文件

bug描述：

uni.chooseFile在手机h5端type=all时加extension后无法过滤


| 项目创建方式 | 开发环境 | 版本号 |
|--------------|----------|--------|
| HBuilderX    | Windows  | win10  |
|              |          | 3.1.22 |

更多关于uni-app 【报Bug】uni.chooseFile在手机h5端type=all时加extension后无法过滤的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

h5 移动端用extension 筛选无效

更多关于uni-app 【报Bug】uni.chooseFile在手机h5端type=all时加extension后无法过滤的实战教程也可以访问 https://www.itying.com/category-93-b0.html


一般国产浏览器对HTML5规范的支持情况不太好，文档有说明。

这是一个已知的H5平台兼容性问题。在移动端浏览器中，<input type="file">的accept属性支持有限，当type设置为’all’时，extension参数在多数移动浏览器中无法正确生效。

问题分析：

  • PC浏览器对文件类型过滤支持较好
  • 移动端浏览器出于安全考虑，对文件选择器的限制更严格
  • 当type='all’时，移动端通常会回退到默认的文件选择行为

临时解决方案：

  1. 针对不同文件类型分别调用chooseFile：
// 分别选择图片和文档
uni.chooseFile({
    count: 9,
    type: 'image',
    success: (res) => {
        // 处理图片文件
    }
});

uni.chooseFile({
    count: 9,
    type: 'file',
    extension: ['.xml','.xls','.xlsx','.docx','.doc','.pptx','.ppt','.pdf','.txt'],
    success: (res) => {
        // 处理文档文件
    }
});
  1. 在文件选择后手动过滤：
uni.chooseFile({
    count: 9,
    type: 'all',
    success: (res) => {
        const allowedExtensions = ['.xml','.xls','.xlsx','.docx','.doc','.pptx','.ppt','.pdf','.txt'];
        const filteredFiles = res.tempFiles.filter(file => 
            allowedExtensions.some(ext => file.name.toLowerCase().endsWith(ext))
        );
        // 使用filteredFiles
    }
});
回到顶部