uni-app uni-file-picker 文件选择上传 - DCloud前端团队 什么时候支持自定义目录

针对您提到的关于uni-app中uni-file-picker组件希望支持自定义目录的需求，虽然目前DCloud官方文档和组件库尚未直接提供自定义目录选择的功能，但我们可以通过一些变通的方法来实现类似效果。以下是一个结合H5+ API和uni-app特性的示例代码，展示如何在文件选择时给予用户一定的目录导航能力（注意，这种方法受限于平台能力，尤其是小程序等平台可能不支持完整文件系统访问）。

示例代码

首先，确保你的项目已经配置了H5+扩展API的权限。

1. 使用H5+的文件选择器并尝试模拟目录

由于uni-file-picker直接不支持自定义目录，我们可以使用plus.io.resolveLocalFileSystemURL和plus.ui.pickFiles结合来模拟一个目录浏览的效果。但请注意，这种方法并不能真正打开文件系统的目录树，而是依赖于用户的选择行为。

// 引入必要的模块
const fs = plus.io;
const ui = plus.ui;

// 定义一个模拟的“目录”
const mockDirectories = [
    {name: 'Documents', path: '_documents/'},
    {name: 'Downloads', path: '_downloads/'}
];

// 显示目录选择界面（这里简单用弹窗模拟）
plus.ui.createPicker({
    type: 'string',
    title: 'Select Directory',
    data: mockDirectories.map(dir => dir.name)
}).show((e) => {
    const selectedDir = mockDirectories[e.index];
    
    // 使用plus.ui.pickFiles选择文件，但限制在模拟的目录下（实际上无法实现真正目录限制）
    ui.pickFiles({
        title: 'Select File',
        count: 1,
        filter: `*.${selectedDir.path.split('/').pop() === '' ? '*' : selectedDir.path.split('/').pop()}` // 这里尝试通过文件后缀模拟目录，但不可靠
    }, (files) => {
        if (files && files.length) {
            console.log('Selected file:', files[0]);
            // 进一步处理文件，如上传
        }
    });
});

注意

• 上述代码是一个概念验证，实际上plus.ui.pickFiles并不支持真正的目录过滤。
• 对于真正的目录选择和文件操作，尤其是在非H5平台（如小程序、App等），可能需要依赖平台特定的原生插件或API。
• 考虑到用户体验和安全性，文件系统的深度访问通常受到严格限制，特别是在移动设备和封闭平台环境中。

随着uni-app和DCloud平台的不断迭代，建议持续关注官方文档和社区更新，以获取最新的功能和优化。