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

背景

公司领导提出这样的产品需求：需要上传目录文件，不只是图片和视频，而且同时要支持Android和IOS两大移动端。另外公司App的架构采用的是uni-app。

第一个想到的方案就是，看uni-app框架能否支持。答案可想而知，uni-app组件本身没有提供文件上传组件，不支持
uni-app App端内置HTML5+引擎，提供plus接口，对于Android系统可以直接调用Android系统函数，打开系统目录。而对于IOS而言，没有找到使用方法
既然内置HTML5+引擎，能否直接嵌入H5页面呢？当然可以。于是采用H5方式实现

嵌入H5页面，需要采用web-view标签，如下：

注意：

第一种解决方法：通过@message传递数据，在h5页面中，上传完文件后，获取上传后的文件信息，直接postMessage后，web-view页面会接收

uni.postMessage({    data: {        action: data    }});

当运行代码的时候，并没有执行@message回调，需要点击h5页面返回的时候，才会调用回调函数。于是在执行完postMessage后，调用如下函数返回上一级页面

uni.navigateBack({    delta: 1});

注意：

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

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

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

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