UniApp调用手机文件选择器方案
UniApp 调用手机文件选择器实现方案
概述
在UniApp开发中，uni.chooseMessageFile API在移动端存在限制，经常只显示相机/相册选项，无法直接访问文件管理器。本文档提供了一套完整的解决方案，使用原生Android Intent和iOS plus.io API来实现真正的文件管理器调用。
问题背景
常见问题
uni.chooseMessageFile在移动端只显示相机选项- 无法访问设备的文件管理器
- 文件类型选择受限
- 用户体验不佳
解决思路
- H5环境: 使用HTML5 file input
- Android环境: 使用原生Intent调用系统文件管理器
- iOS环境: 使用plus.io.chooseFile API
- 回退机制: uni.chooseMessageFile作为最后选择
完整实现代码
1. 主函数入口
// 文件选择主函数
const selectFile = () => {
// #ifdef H5
// H5环境使用HTML5 file input
const input = document.createElement('input');
input.type = 'file';
input.accept = '*/*'; // 接受所有文件类型
input.style.display = 'none';
input.onchange = (event) => {
const file = event.target.files[0];
if (file) {
handleFileUpload(file);
}
document.body.removeChild(input);
};
document.body.appendChild(input);
input.click();
// #endif
// #ifndef H5
// App环境使用原生方式
if (window.plus) {
chooseFileWithIntent();
} else {
document.addEventListener('plusready', () => {
chooseFileWithIntent();
}, false);
}
// #endif
};
2. Android原生Intent实现
// 使用原生Android Intent选择文件
function chooseFileWithIntent() {
try {
if (plus.os.name.toLowerCase() === 'android') {
console.log('使用Android原生Intent选择文件');
let main = plus.android.runtimeMainActivity();
let Intent = plus.android.importClass('android.content.Intent');
let Activity = plus.android.importClass('android.app.Activity');
// 方法1: 直接启动系统文件管理器
try {
let intent = new Intent();
intent.setAction(Intent.ACTION_GET_CONTENT);
intent.setType('*/*');
intent.addCategory(Intent.CATEGORY_OPENABLE);
// 添加标志强制显示文件管理器
intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
intent.putExtra(Intent.EXTRA_LOCAL_ONLY, false);
intent.putExtra("android.content.extra.SHOW_ADVANCED", true);
main.startActivityForResult(intent, 200);
console.log('启动系统文件管理器');
} catch (e1) {
// 方法2: 使用ACTION_OPEN_DOCUMENT
let intent2 = new Intent();
intent2.setAction(Intent.ACTION_OPEN_DOCUMENT);
intent2.setType('*/*');
intent2.addCategory(Intent.CATEGORY_OPENABLE);
intent2.putExtra(Intent.EXTRA_LOCAL_ONLY, false);
main.startActivityForResult(intent2, 200);
console.log('使用ACTION_OPEN_DOCUMENT');
}
// 设置回调处理
main.onActivityResult = function(requestCode, resultCode, data) {
if (requestCode === 200 && resultCode === Activity.RESULT_OK && data) {
let uri = data.getData();
if (uri) {
console.log('选择的文件URI:', uri.toString());
getRealFilePathFromUri(uri, (fileInfo) => {
if (fileInfo) {
handleFileUpload(fileInfo);
}
});
}
}
};
} else {
// iOS平台使用plus.io.chooseFile
chooseFileForIOS();
}
} catch (error) {
console.error('启动文件选择器失败:', error);
fallbackToUniAPI();
}
}
3. Android文件路径解析
// 从Android URI获取文件真实路径和信息
function getRealFilePathFromUri(uri, callback) {
try {
let DocumentsContract = plus.android.importClass('android.provider.DocumentsContract');
let MediaStore = plus.android.importClass('android.provider.MediaStore');
let main = plus.android.runtimeMainActivity();
let contentResolver = main.getContentResolver();
plus.android.importClass(contentResolver);
// 获取文档ID
let docId = DocumentsContract.getDocumentId(uri);
let split = docId.split(":");
let selection = "_id=?";
let selectionArgs = [split[1]];
// 查询文件信息
let queryUri = MediaStore.Files.getContentUri("external");
let cursor = contentResolver.query(queryUri,
['_data', '_display_name', '_size'],
selection, selectionArgs, null);
if (cursor != null && cursor.moveToFirst()) {
let dataIndex = cursor.getColumnIndexOrThrow('_data');
let nameIndex = cursor.getColumnIndex('_display_name');
let sizeIndex = cursor.getColumnIndex('_size');
let realPath = cursor.getString(dataIndex);
let fileName = nameIndex >= 0 ? cursor.getString(nameIndex) : getFileNameFromPath(realPath);
let fileSize = sizeIndex >= 0 ? cursor.getLong(sizeIndex) : 0;
cursor.close();
// 使用plus.io.resolveLocalFileSystemURL获取文件对象
plus.io.resolveLocalFileSystemURL('file://' + realPath, (entry) => {
entry.file((file) => {
const fileInfo = {
path: 'file://' + realPath,
tempFilePath: 'file://' + realPath,
name: fileName,
size: file.size || fileSize,
file: file
};
callback(fileInfo);
}, (error) => {
// 即使获取文件对象失败，也返回基本信息
const fileInfo = {
path: 'file://' + realPath,
tempFilePath: 'file://' + realPath,
name: fileName,
size: fileSize
};
callback(fileInfo);
});
});
} else {
callback(null);
}
} catch (error) {
console.error('获取文件信息异常:', error);
callback(null);
}
}
4. iOS文件选择
// iOS平台文件选择
function chooseFileForIOS() {
plus.io.chooseFile({
title: '选择文件',
filetypes: ['*'], // 允许所有文件类型
multiple: false,
}, (e) => {
console.log('iOS文件选择成功:', e);
if (e.files && e.files.length > 0) {
const filePath = e.files[0];
const fileInfo = {
path: filePath,
tempFilePath: filePath,
name: getFileNameFromPath(filePath),
size: 0
};
handleFileUpload(fileInfo);
}
}, (err) => {
console.error('iOS文件选择失败:', err);
uni.showToast({
title: '文件选择失败',
icon: 'none'
});
});
}
5. 回退机制
// 回退到uni API
function fallbackToUniAPI() {
console.log('回退到uni API');
uni.chooseMessageFile({
count: 1,
type: 'file',
success: (res) => {
const file = res.tempFiles[0];
handleFileUpload(file);
},
fail: (err) => {
console.error('uni API也失败了:', err);
uni.showModal({
title: '文件选择失败',
content: '无法打开文件选择器，请确保设备支持文件管理功能。',
showCancel: false,
confirmText: '知道了'
});
}
});
}
6. 文件处理函数
// 文件上传处理
const handleFileUpload = async (file) => {
// 获取文件信息
const fileName = file.name || file.path || '';
console.log('准备上传文件:', fileName);
// 文件类型验证（可选）
if (!fileName.toLowerCase().endsWith('.txt')) {
uni.showToast({
title: '只支持txt文件，请选择txt格式的文件',
icon: 'none',
duration: 3000
});
return;
}
// 文件大小验证
if (file.size && file.size > 10 * 1024 * 1024) {
uni.showToast({
title: '文件大小不能超过10MB',
icon: 'none',
duration: 2000
});
return;
}
// 继续处理文件上传...
console.log('文件验证通过，开始上传');
};
// 工具函数：从路径提取文件名
const getFileNameFromPath = (path) => {
if (!path) return 'unknown.txt';
const parts = path.split('/');
return parts[parts.length - 1] || 'unknown.txt';
};
关键技术点
Android Intent配置
Intent.ACTION_GET_CONTENT: 获取内容的标准ActionsetType('*/*'): 允许所有文件类型CATEGORY_OPENABLE: 只显示可打开的文件FLAG_ACTIVITY_NEW_TASK: 在新任务中启动EXTRA_LOCAL_ONLY: 控制是否只显示本地文件
文件路径处理
- 使用
DocumentsContract获取文档ID - 通过
MediaStore查询获取真实路径 - 使用
plus.io.resolveLocalFileSystemURL获取文件对象
错误处理
- 多重回退机制确保兼容性
- 详细的错误日志便于调试
- 用户友好的错误提示
使用注意事项
- 权限要求: 确保应用有文件访问权限
- 平台兼容: 不同Android版本可能有差异
- 文件路径: 注意虚拟路径和真实路径的转换
- 内存管理: 及时关闭Cursor等资源
- 用户体验: 提供清晰的加载状态和错误提示
常见问题与解决方案
Q1: 为什么还是只显示相机选项？
A: 可能的原因和解决方案：
- 检查是否正确导入了Android类
- 确认Intent配置是否正确
- 尝试不同的Intent Action（GET_CONTENT vs OPEN_DOCUMENT）
- 检查设备是否安装了文件管理器应用
Q2: 获取文件路径失败怎么办？
A:
- Android 10+有作用域存储限制，可能无法获取真实路径
- 可以直接使用contentUri进行文件操作
- 使用
plus.io.resolveLocalFileSystemURL处理路径
Q3: iOS平台文件选择失败？
A:
- 确认plus.io API是否可用
- 检查iOS版本兼容性
- 回退到uni.chooseMessageFile
Q4: 如何支持特定文件类型？
A:
// 在Intent中指定MIME类型
intent.setType('application/pdf'); // 只显示PDF文件
intent.setType('image/*'); // 只显示图片文件
intent.setType('text/plain'); // 只显示文本文件
性能优化建议
- 懒加载: 只在需要时导入Android类
- 内存管理: 及时释放Cursor和其他资源
- 异步处理: 文件路径解析使用异步方式
- 缓存机制: 缓存常用的文件管理器包名
扩展功能
多文件选择
intent.putExtra(Intent.EXTRA_ALLOW_MULTIPLE, true);
指定初始目录
// 设置初始目录（需要权限）
let uri = Uri.parse("content://com.android.externalstorage.documents/document/primary%3ADownload");
intent.putExtra("android.provider.extra.INITIAL_URI", uri);
文件类型过滤
// 支持多种MIME类型
let mimeTypes = ['text/plain', 'application/pdf', 'image/*'];
intent.putExtra(Intent.EXTRA_MIME_TYPES, mimeTypes);
调试技巧
- 日志输出: 在关键步骤添加console.log
- 异常捕获: 使用try-catch包装所有原生调用
- 设备测试: 在不同品牌和版本的设备上测试
- 模拟器测试: 使用Android Studio模拟器调试
参考资料
总结
这套方案解决了UniApp文件选择的核心问题，提供了：
- ✅ 真正的文件管理器访问
- ✅ 跨平台兼容性
- ✅ 完整的错误处理
- ✅ 良好的用户体验
- ✅ 灵活的文件类型控制
通过原生API调用，用户可以自由浏览设备上的所有文件，选择需要的文件进行处理。这是目前UniApp中最可靠的文件选择解决方案。
扫一扫
205
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
