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

相关推荐
河北清兮网络科技9 小时前
短剧 APP 产品说明
小程序·uni-app·短剧
宠友信息14 小时前
一套基于uniapp+springboot完整社区系统是如何实现的?友猫社区源码级功能解析
java·spring boot·后端·微服务·微信·uni-app
碎像1 天前
掌握uniapp发布微信小程序、App(Android)
微信小程序·小程序·uni-app
stpzhf1 天前
uniapp nvue组件多个text在一行并且高亮其中一些文字
前端·javascript·uni-app
qq_316837751 天前
制作uniapp原生插件 在本地离线打包中测试 集成在云打包中
uni-app
Fate_I_C2 天前
uniappx 鸿蒙运行包制作失败
华为·uni-app·uniapp·harmonyos
chQHk57BN2 天前
跨平台前端开发:用Flutter和UniApp一次编写多端运行
flutter·uni-app
自然 醒3 天前
uni-app开发微信小程序,如何使用towxml去渲染md格式和html标签格式的内容?
微信小程序·uni-app·html
CHB3 天前
uni-agent,你的数字员工来了
人工智能·uni-app·vibecoding
h_jQuery3 天前
uniapp使用canvas实现逐字书写任意文字内容,后合成一张图片提交
前端·javascript·uni-app