Uniapp App端文件选择

参考资料

相关插件:

Aq-ChooseFile 文件选择，支持自定义路径，自定义筛选类型，多选 - DCloud 插件市场

!!! 该案例在 uniappX vue3 下进行 !!!

一、Aq-ChooseFile 插件

在components 文件夹下新建 SelectFile.js 文件

1-1.编辑SelectFile.js 文件

const AfDocument = uni.requireNativePlugin("Aq-ChooseFile");

export function openFileModal() {
	return new Promise((resolve) => {
		AfDocument.openMode({
				size: '1', //选择总数量
				// paths:['/storage/emulated/0/Download','/storage/emulated/0/A',],   //自定义选择目录
				isDown: false,//是否下钻（true 筛选当前目录以下的所有文件，fales 只筛选当前目录文件） 
				// types:[{
				//     name:'文档',
				//     value:["doc","wps","docx","xls","xlsx","pdf"]
				// },{
				//     name:'视频',
				//     value:["mp4"] 
				// },{
				//     name:'音乐',
				//     value:['mp3','flac'] 
				// },{
				//     name:'图片',
				//     value:['jpg','png'] 
				// }]
				types: [
					{
						name: '视频',
						value: ['mp4', 'flv'],
					},
					{
						name:'3DTileset',
						value:['json','png'] 
					},
					{
						name:'图片',
						value:['jpg','png'] 
					},
				],
		},(res)=>{
			// const msg = JSON.stringify(res);
			// console.log('msg:', msg);
			resolve(res);
		})
	
	})
}

1-2. 编辑 main.js 文件

import { createApp } from 'vue';
import App from "./App";
import { openFileModal } from "@/components/SelectFile.js" // 引入Aq-ChooseFile 插件

const app = createApp(App);

app.config.globalProperties.$openFileModal = openFileModal; // 将 Aq-ChooseFile 插件挂载至vue 原型上(vue3 挂载全局属性的方式)

app.mount("#app")

1-3. 在业务组件进行调用page/index/index.vue

<template>
	<view class="content">
		<view class="btn">
			<button @click="open" size="mini">文件选择</button>
		</view>
		<image :src="fileUrl"></image>
	</view>
</template>

<script>
	// import { ref, onMounted } from "vue";
	
	export default {
		data(){
			return {
				fileUrl: '',
			}
		},
		components: {
		},
		methods: {
			async open() {
				const res = await this.$openFileModal(); // 直接通过 this.$openFileModal 方法进行调用
				console.log('path:', JSON.stringify(res));
				if(res.code === 'success') {
					const item = res.res[0] || {};
					this.fileUrl = item.pathHolp;
				}
			}
		}
	}
	
</script>

<style>
	.content {
	}
 .btn {
	 position: fixed;
	 top: 3vh;
	 left: 20rpx;
	 z-index: 9;
	 width: 300rpx;
	 height: 50rpx;
 }
</style>