关于微信小程序保存文件的最佳解决方案
最近在写微信小程序的时候,涉及了用户下载文件到本地的需求。去看了下文档,首先要先通过wx.donwloadFile
,将文件下载到本地。
然后我记得有一个saveFile
的API
,可以进行文件的保存,看了下文档,看到这个API
已经停止维护了。
推荐使用的是FileSystemManager.saveFile
,而这个FileSystemManager
是通过wx.getFileSystemManager
获取。
经过一些列的操作之后,终于可以使用FileSystemManager
的saveFile
方法了。
downloadFile(e) {const { item: { printImg } } = e.currentTarget.dataset;wx.showLoading({title: '下载中',})wx.cloud.downloadFile({fileID: printImg, // 文件 IDsuccess: res => {// 返回临时文件路径console.log(res.tempFilePath);const fileManager = wx.getFileSystemManager();fileManager.saveFile({tempFilePath: res.tempFilePath,success: (res) => {console.log(res, '下载成功');wx.hideLoading();}})},})},
然后,重要是FileSystemManager.saveFile
在成功执行之后的返回值,会有一个saveFilePath
,也就是这个文件被保存到了哪儿。
但是,单纯看这个路径,是不容易找到这个文件。
微信的解释是,想维护一个属于小程序自己的域,不想共享到外部,所以,这个文件地址是一个相对隐式的地址,不容易被直接找到。
我查阅了很多的资料,找到了一个目前我认为最优的解决方案。
既然,给咱们返回的这个保存地址不容易被找到,那就让机器去找,微信小程序有一个API
可以打开文档,是openDocument
,重点是它有一个showMenu
的属性,也就是预览文档的时候,右上角会出现一个三个点...
,点击之后有保存等操作。这个保存是显式的保存,可以被直接找到。
downloadFile(e) {const { item: { printImg } } = e.currentTarget.dataset;wx.showLoading({title: '下载中',})wx.cloud.downloadFile({fileID: printImg, // 文件 IDsuccess: res => {// 返回临时文件路径console.log(res.tempFilePath);const fileManager = wx.getFileSystemManager();fileManager.saveFile({tempFilePath: res.tempFilePath,success: (res) => {console.log(res, '下载成功');wx.hideLoading();wx.openDocument({filePath: res.savedFilePath,showMenu: true,})}})},})},
我分别在PC端和移动端展示一下。
首先是PC端,在点击下载文件按钮时。
会弹出一个文档的预览界面。
这里面有打印、另存为等一系列的操作,就可以实现预期的需求。
其实看一下这个文档的地址栏,也能看出来,其实这个saveFile
的API
保存的地址是不想让你找到的,路径里有AppData
,这是个C盘的目录,默认其实是隐藏的,只有你设置过,才会显示。所以,我们需要找到更好的解决方式。
然后是移动端。
移动端同样点击下载文件按钮后,也弹出了一个预览文档的界面,重点是看右上角,当设置了openDocument
这个API
的showMenu
属性为true
之后,就会出现这三个点...
。
点击这三个点...
之后,会出现保存到手机的操作。
点击之后,就可以在自己的文件管理里,很明显的找到这个文件,如果不做这一步操作,你是不容易找到saveFile
这个API
的保存位置的。
目前,我觉得这是这好的解决方案了。我看到还有一些建议是,在saveFile
的时候,将文件保存为一个图片,图片在进行保存的时候,是可以直接显式的保存到相册了。
然后再通过改后缀的方式,改回原来的文件后缀,很明显这样的方案,需要用户进行大量的自主操作,我觉得不太合适。
QQ: 505417246
WX: 18331092918
微信公众号: Code程序人生
CSDN账号: CreatorRay
B站账号: LuckyRay123
个人博客: http://rayblog.ltd/
欢迎关注我的各类账号, 持续更新优质前端内容
关于微信小程序保存文件的最佳解决方案相关推荐
- uniapp开发微信小程序保存文件方案总结
uniapp开发微信小程序保存文件方案总结 1.需求背景 最近正使用uniapp开发微信小程序项目,现需要保存文件. 解决方案 // 方法如下,filePath:文件地址:uni.authorize( ...
- 微信小程序 — 保存文件到本地
文章目录 wx.saveFile(Object object) FileSystemManager.saveFile(Object object) 下载文件至本地,并打开文档 wx.saveFile( ...
- 小程序php文档,微信小程序API 文件
微信小程序API 文件 wx.saveFile(OBJECT) 保存文件到本地. OBJECT参数说明: 示例代码:wx.startRecord({ success: function(res) { ...
- 微信小程序下载文件至本地,并打开文档
微信小程序下载文件至本地,并打开文档 downloadfile(e){var url = e.currentTarget.dataset.url;//下载文件,生成临时地址wx.downloadFil ...
- 微信小程序保存视频到相册wx.saveVideoToPhotosAlbum()
一.微信小程序保存视频到相册wx.saveVideoToPhotosAlbum() 功能描述 保存视频到系统相册.支持mp4视频格式. 参数 Object object 属性 类型 默认值 必填 说明 ...
- 微信小程序多文件上传之wx-multipart
微信小程序多文件上传之wx-multipart 前言:我后端写了个多文件上传接口,奈何前端同事说微信小程序只能单文件上传,要支持多文件上传还要我单独再写一个单文件上传的接口,我他喵- 我看了下微信小程 ...
- 微信小程序之文件上传PHP后台接收
微信小程序之文件上传(word,excel图片等) 微信前台代码 .html <!--pages/demo4/demo4.wxml--> <view class="cont ...
- 微信小程序删除文件Page剩余
微信小程序删除文件Page剩余 问题 对于文件夹无法通过右键将文件夹及其包含Page删除. 手动一一删除后重新编译, 会自动生成该文件的WXML页面与JavaScript页面, 无法删除. 解决 删除 ...
- Flask与微信小程序之文件上传与显示
文章目录 Flask与微信小程序之文件上传与显示 背景 flask_uploads应用 flask_uploads的使用步骤 1 安装flask-uploads模块 2 在文件夹中导入需要用到的库 3 ...
最新文章
- [生活化技术]组合模式 vs. 理发店价格表
- ORA-07445 [kxsxsi()+450] [SIGSEGV]
- java ftp 判断目录存在_java判断ftp目录是否存在的方法
- javascript系列之执行上下文
- AI应用开发基础傻瓜书系列3-损失函数
- oracle命令行原理,Oracle命令行操作方式
- Java数据库篇2——数据库基本操作
- 如何基于Docker快速搭建Elasticsearch集群?
- 网络管理与维护作业12
- java语言乘号_java的编码样式、运算符运算对象
- ubuntu linux设置网关,ubuntu修改静态IP网关
- 前端那些事之时间轴篇
- grads 相关系数_GrADS实习报告6
- Ubuntu18新系统火狐浏览器无法播放音乐和视频
- SHT20的使用问题
- python opencv gpu加速_让Python下的OpenCV也能GPU加速!part.1
- 基于HL7的HIE平台
- 朴素贝叶斯详解及中文舆情分析(附代码实践)
- 小心肝队-冲刺日志(第一天)
- 基于最小割的分割算法(Min-Cut Based Segmentation)