Uniapp App(Android)端 非媒体文件的选择、上传、下载、查看功能

Uniapp App(Android)端 非媒体文件的选择是其中的难点,官方 uni-file-picker 但是这个组件App端只支持上传图片和视频,而官方文档提供的uni.chooseFile(),也不支持App端。安卓端选取非图片文件(plus.io.chooseFile)时文件地址是content://开头的url。content://开头的URI是一种内容URI,它不直接暴露文件的物理路径(如/storage/emulated/0/...),而是通过Android的<ml-search-more text="ContentResolver" _type="textDirective">ContentResolver</ml-search-more>机制进行间接访问。这种设计源于Android的存储访问框架(SAF),当应用请求访问外部存储文件时,系统会授予临时权限,返回content://形式的URI以确保安全性,防止应用直接读取或写入其他应用的文件。接下来使用plus.io.chooseFile 进行文件选取并处理成能使用的本地路径,代码如下:

javascript 复制代码
onAndriodChooseFile() {
			const MediaStore = plus.android.importClass('android.provider.MediaStore');
			const main = plus.android.runtimeMainActivity();

			plus.io.chooseFile({
				title: '选择文件',
				filter: '.xlsx,.docx', // 允许的文件类型  
				multiple: false, // 是否允许多选  
			}, (e) => {
				// 获取文件的虚拟路径
				const contentUri = decodeURIComponent(e.files[0])
				const uri = MediaStore.Files.getContentUri("external");
				// 给系统导入 contentResolver
				plus.android.importClass(main.getContentResolver());
				const arr = contentUri.split(':')
				// 通过查询的方式用虚拟路径的id1获取到文件的真实路径
				let cursor = main.getContentResolver().query(uri, ['_data'], "_id=?", [arr[arr.length - 1]], null);
				plus.android.importClass(cursor);
				let result
				if (cursor != null && cursor.moveToFirst()) {
					let column_index = cursor.getColumnIndexOrThrow('_data');
					result = cursor.getString(column_index)   // result即文件的真实路径
					cursor.close();
				}
				result = 'file:/' + result  // 此处拿到本地路径,后续根据你的业务代码进行处理即可
			    console.log('result:', result)
			})
		}

2、上传文件使用官方的方法: 参考uni.uploadFile

3、网络文件需要通过官方的方法下载到本地才能预览: 参考uni.downloadFile (本地文件忽略这一步)

4、打开文档也是使用官方的方法,参考:uni.openDocument

相关推荐
雪芽蓝域zzs2 天前
uni-app原生editor封装编辑组件(vue3)
uni-app
felipeas3 天前
uni-app day1
uni-app·notepad++
前端后腿哥3 天前
UNIAPPX UTS插件Widget开发完整教程(Android版)
前端·uni-app
黄同学real4 天前
uni-app 真机调试:手动代理环境下访问内网 API 的解决方案
uni-app
Hoshizola4 天前
uniapp与蓝牙设备连接详细步骤
前端·uni-app
优雅格子衫4 天前
uniapp 拍照相册选取后超级好用的裁剪组件,增加水印完全自定义
开发语言·前端·javascript·uni-app·vue
路光.4 天前
uniapp中解决webview在app中调用,有过渡空白问题,增加过渡动效
uni-app·vue·app·uniapp
linlinlove24 天前
前端uniapp、后端thinkphp股票系统开发功能展示、代码披露、HQChart
前端·uni-app·echarts·thinkphp·hqchart·配资·deepseek选股票
2501_915909064 天前
深入理解HTTPS中间人抓包技术原理与实战指南
网络协议·http·ios·小程序·https·uni-app·iphone
2501_916007475 天前
iOS应用性能优化全面指南:从内存管理到工具使用
android·ios·性能优化·小程序·uni-app·iphone·webview