背景
公司领导提出这样的产品需求：需要上传目录文件，不只是图片和视频，而且同时要支持 Android 和 IOS 两大移动端。另外公司 App 的架构采用的是 uni-app。
思考
- 第一个想到的方案就是，看 uni-app 框架能否支持。答案可想而知，uni-app 组件本身没有提供文件上传组件，不支持
<input type="file"/> - uni-app App 端内置 HTML5+ 引擎，提供 plus 接口，对于 Android 系统可以直接调用 Android 系统函数，打开系统目录。而对于 IOS 而言，没有找到使用方法
- 既然内置 HTML5+ 引擎，能否直接嵌入 H5 页面呢？当然可以。于是采用 H5 方式实现
H5 页面文件上传
嵌入 H5 页面，需要采用 web-view 标签，如下：
<web-view src="/hybrid/html/index.html" @message="handleMessage"></web-view>注意：
- h5 页面必须在项目目录：/hybrid/html/ 下面，因为这样 uni-app 才不会进行编译
- @message 事件是 h5 页面向应用发送数据的回调
web-view 传递数据问题
1、@message
第一种解决方法：通过 @message 传递数据，在 h5 页面中，上传完文件后，获取上传后的文件信息，直接 postMessage 后，web-view 页面会接收
uni.postMessage({
data: {action: data}
});问题
当运行代码的时候，并没有执行 @message 回调，需要点击 h5 页面返回的时候，才会调用回调函数。于是在执行完 postMessage 后，调用如下函数返回上一级页面
uni.navigateBack({delta: 1});注意：
- 在 h5 页面中调用 uni-app 接口时，需要添加 uni SDK
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>- 如果要让 web-view 的上一级页面，即表单页面接收数据，解决方法是：放到 store 中，表单页面从 store 中获取
2、页面跳转 url 传递数据
第二种解决方法：通过页面跳转 url 传递数据。在 h5 页面上传完文件后，调用页面跳转函数，将文件数据放到 url 参数中，如下：
uni.redirectTo({url: './h5Upload?fileData=' + data,})demo
github：https://github.com/silianpan/…
- 两种方案
- 表单页
- 选择系统目录文件
- 页面跳转 url 传递数据
附：Android 选择系统目录
转载请注明：溜爸 » uni-app 系统目录文件上传（非只图片和视频）解决方案