uniapp系统目录文件上传非只图片和视频解决方案

背景

公司领导提出这样的产品需求：需要上传目录文件，不只是图片和视频，而且同时要支持 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 系统目录文件上传（非只图片和视频）解决方案