{"id":28494604,"url":"https://github.com/lavieall/uniapp-file-upload","last_synced_at":"2026-03-10T06:03:25.110Z","repository":{"id":105328671,"uuid":"210082356","full_name":"lavieAll/uniapp-file-upload","owner":"lavieAll","description":"uni-app系统目录文件上传（非只图片和视频）解决方案，永中云服务提供文档上传和在线预览","archived":false,"fork":false,"pushed_at":"2021-03-11T09:17:06.000Z","size":29,"stargazers_count":53,"open_issues_count":1,"forks_count":21,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-06-08T10:07:25.924Z","etag":null,"topics":["android","file-preview","file-upload","ios","uni-app","yozocloud"],"latest_commit_sha":null,"homepage":"http://ua-doc.silianpan.cn","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lavieAll.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-09-22T03:00:00.000Z","updated_at":"2025-05-12T01:45:15.000Z","dependencies_parsed_at":"2023-05-18T05:45:12.910Z","dependency_job_id":null,"html_url":"https://github.com/lavieAll/uniapp-file-upload","commit_stats":null,"previous_names":["lavieall/uniapp-file-upload","silianpan/uniapp-file-upload"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/lavieAll/uniapp-file-upload","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lavieAll%2Funiapp-file-upload","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lavieAll%2Funiapp-file-upload/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lavieAll%2Funiapp-file-upload/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lavieAll%2Funiapp-file-upload/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lavieAll","download_url":"https://codeload.github.com/lavieAll/uniapp-file-upload/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lavieAll%2Funiapp-file-upload/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30326878,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-10T05:25:20.737Z","status":"ssl_error","status_checked_at":"2026-03-10T05:25:17.430Z","response_time":106,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["android","file-preview","file-upload","ios","uni-app","yozocloud"],"created_at":"2025-06-08T10:07:32.486Z","updated_at":"2026-03-10T06:03:25.099Z","avatar_url":"https://github.com/lavieAll.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# uniapp-file-upload\nuni-app系统目录文件上传（非只图片和视频）解决方案\n\n## 永中云服务\n\n1.0.1新版本已经发布~\n\n新版本基于永中云服务-云预览，完善并实现了跨平台H5文件（非只图片和视频）上传，[永中开发者平台](https://open.yozocloud.cn/)。\n\n参考技术文档[《跨平台文档在线预览解决方案（五）-水印、防复制、在线编辑等》](https://juejin.cn/post/6938247508325842958)\n\n## 背景\n公司领导提出这样的产品需求：需要上传目录文件，不只是图片和视频，而且同时要支持Android和IOS两大移动端。另外公司App的架构采用的是uni-app。\n\n## 思考\n* 第一个想到的方案就是，看uni-app框架能否支持。答案可想而知，uni-app组件本身没有提供文件上传组件，不支持```\u003cinput type=\"file\"/\u003e```\n* uni-app App端内置HTML5+引擎，提供plus接口，对于Android系统可以直接调用Android系统函数，打开系统目录。而对于IOS而言，没有找到使用方法\n* 既然内置HTML5+引擎，能否直接嵌入H5页面呢？当然可以。于是采用H5方式实现\n\n## H5页面文件上传\n嵌入H5页面，需要采用web-view标签，如下：\n\u003cweb-view src=\"/hybrid/html/index.html\" @message=\"handleMessage\"\u003e\u003c/web-view\u003e\n\n注意：\n* h5页面必须在项目目录：/hybrid/html/下面，因为这样uni-app才不会进行编译\n* @message事件是h5页面向应用发送数据的回调\n\n## web-view传递数据问题\n### 1、@message\n第一种解决方法：通过@message传递数据，在h5页面中，上传完文件后，获取上传后的文件信息，直接postMessage后，web-view页面会接收\n```js\nuni.postMessage({\n\tdata: {\n\t\taction: data\n\t}\n});\n```\n#### 问题\n当运行代码的时候，并没有执行@message回调，需要点击h5页面返回的时候，才会调用回调函数。于是在执行完postMessage后，调用如下函数返回上一级页面\n```js\nuni.navigateBack({\n\tdelta: 1\n});\n```\n\n注意：\n* 在h5页面中调用uni-app接口时，需要添加uni SDK\n\u003cscript type=\"text/javascript\" src=\"https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js\"\u003e\u003c/script\u003e\n\n* 如果要让web-view的上一级页面，即表单页面接收数据，解决方法是：放到store中，表单页面从store中获取\n\n### 2、页面跳转url传递数据\n第二种解决方法：通过页面跳转url传递数据。在h5页面上传完文件后，调用页面跳转函数，将文件数据放到url参数中，如下：\n```js\nuni.redirectTo({\n\turl: './h5Upload?fileData=' + data,\n})\n```\n\n## Demo\ngithub：https://github.com/silianpan/uniapp-file-upload\n\n* 两种方案\n\n\u003cimg src=\"http://silianpan.cn/wp-content/uploads/2019/09/fc333860ebc49b6db159e08a6e29fcb4.png\" width=\"320\" /\u003e\n\n* 表单页\n\n\u003cimg src=\"http://silianpan.cn/wp-content/uploads/2019/09/7e35411c5ad85b57534e68ee68b77158.png\" width=\"320\" /\u003e\n\n* 选择系统目录文件\n\n\u003cimg src=\"http://silianpan.cn/wp-content/uploads/2019/09/553e4abb905801436d341747342c0288.png\" width=\"320\" /\u003e\n\n* 页面跳转url传递数据\n\n\u003cimg src=\"http://silianpan.cn/wp-content/uploads/2019/09/7f4c2261bc4b102262d855b0359ce3d4.png\" width=\"320\" /\u003e\n\n## 附：Android选择系统目录\n\u003cimg src=\"http://silianpan.cn/wp-content/uploads/2019/09/ac3a52f7fd7c907c9058019354853d44.png\" width=\"320\" /\u003e\n\n转载请注明：[溜爸 » uni-app系统目录文件上传（非只图片和视频）解决方案](http://silianpan.cn/index.php/2019/09/22/uniapp_file_upload/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flavieall%2Funiapp-file-upload","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flavieall%2Funiapp-file-upload","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flavieall%2Funiapp-file-upload/lists"}