uni-app系统目录文件上传（非只图片和视频）解决方案

背景

公司领导提出这样的产品需求：须要上传目录文件，不仅是图片和视频，并且同时要支持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传递数据问题

一、@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中获取

二、页面跳转url传递数据

第二种解决方法：经过页面跳转url传递数据。在h5页面上传完文件后，调用页面跳转函数，将文件数据放到url参数中，以下：

uni.redirectTo({
    url: './h5Upload?fileData=' + data,
})

demo

github：https://github.com/silianpan/...

• 两种方案

• 表单页

• 选择系统目录文件

• 页面跳转url传递数据

附：Android选择系统目录

转载请注明：溜爸 » uni-app系统目录文件上传（非只图片和视频）解决方案