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

相关推荐
ZEGO即构开发者5 小时前
uni-app 集成音视频 SDK 全攻略:30 分钟搭建跨端视频通话功能
uni-app·音视频·视频通话功能
Hzsilvana6 小时前
在 uni-app 中检测 APP 端是否有通知权限
uni-app
咸虾米_6 小时前
uniapp使用history路由模式打包上线到前端网页托管的注意事项
前端·uni-app·vue3·unicloud·前端网页托管
2501_915921436 小时前
iPhone HTTPS 抓包在真机环境下面临的常见问题
android·ios·小程序·https·uni-app·iphone·webview
未寒7 小时前
关于uni app vue2 和vue3 的区别
前端·javascript·vue.js·uni-app
snow@li7 小时前
小程序-uniapp:vue3-typescript项目使用mp-html实现展示富文本
javascript·typescript·uni-app
2501_915918417 小时前
iOS 图片资源保护方法,分析图片在二次打包和资源篡改中的实际风险
android·ios·小程序·https·uni-app·iphone·webview
几度风雨见丹心8 小时前
uniapp项目使用sqlite数据库
数据库·sqlite·uni-app
全栈软件开发8 小时前
Fidelity充电桩投资理财系统源码-前端uniapp纯源码+后端PHP
前端·uni-app·php