uni-app系统目录文件上传(非只图片和视频)解决方案,永中云服务提供文档上传和在线预览
uni-app系统目录文件上传(非只图片和视频)解决方案
1.0.1新版本已经发布~
新版本基于永中云服务-云预览,完善并实现了跨平台H5文件(非只图片和视频)上传,永中开发者平台。
参考技术文档《跨平台文档在线预览解决方案(五)-水印、防复制、在线编辑等》
公司领导提出这样的产品需求:需要上传目录文件,不只是图片和视频,而且同时要支持Android和IOS两大移动端。另外公司App的架构采用的是uni-app。
<input type="file"/>
嵌入H5页面,需要采用web-view标签,如下: <web-view src="/hybrid/html/index.html" @message="handleMessage">
注意:
第一种解决方法:通过@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/uniapp-file-upload