微信小程序下载保存文件

最新推荐文章于 2024-06-17 14:49:43 发布

恒福源

最新推荐文章于 2024-06-17 14:49:43 发布

阅读量2.3k

点赞数 2

分类专栏：微信小程序文章标签：微信小程序

原文链接：https://blog.csdn.net/qq_37131884/article/details/123360114

版权

微信小程序专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前言
总是有需求想在微信小程序里面做下载文件并保存的功能，所以自己整理了一下小程序涉及到下载api，大致理了下在小程序里面下载的流程和解决方案。

一、涉及api
1.wx.saveFile()
文档链接：https://developers.weixin.qq.com/miniprogram/dev/api/file/wx.saveFile.html

作用：保存文件到本地。

注意：
1.该api调用的限制是下载文件最大为10m，且该接口已停止维护。
2.不支持保存后的文件转发，保存后的文件仅支持在小程序内使用。
3.保存的位置是在小程序缓存里面，开发者和用户不需要关心。

2.wx.downloadFile()
文档链接：https://developers.weixin.qq.com/miniprogram/dev/api/network/download/wx.downloadFile.html

作用：下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求，返回文件的本地临时路径 (本地路径)。
注意：
单次下载允许的最大文件为 200MB。

3.wx.getFileSystemManager().saveFile()
文档链接：https://developers.weixin.qq.com/miniprogram/dev/api/file/FileSystemManager.saveFile.html

作用：微信文件管理对象，保存临时文件到本地。
注意：
1.FileSystemManager是微信小程序文件管理器，通过 wx.getFileSystemManager 获取,saveFile()是它提供的一个方法

4.api总结
以上三个api都不能实现真正意义的下载保存，因为微信小程序提供的存储服务是以小程序和用户维度隔离的存储服务，所以下载下来之后用户并不能访问到自己下载的文件。做不到用户下载文件之后可以快捷的找到下载的文件。只是下载到微信app的缓存里面。且微信也不建议开发人员或用户去查询本地文件存储的路径。该结论官方文档也有具体说明：

文档链接：https://developers.weixin.qq.com/miniprogram/dev/framework/ability/file-system.html

二、解决方案
基于以上问题，有以下可实行的解决方案

1.方案一
使用wx.downloadFile() 下载对应文件后，使用fileSystemManager.saveFile API保存文件为图片格式;保存成功后，再使用wx.saveImageToPhotosAlbum保存到相册，然后这个时候我们给出弹窗提醒让用户跑到相册文件中找到对应的文件重命名改掉文件格式。

缺陷：这种方式对iOS某些机型系统不兼容。具体我也没去试，因为后续没有使用该方案。

代码：因为我是用uniapp写的案例，所以代码是这样的，且因为做个示例，代码格式写的层层嵌套，但是大概实现关键代码都在，望各位大佬包容。

           downloadFile(){
               let link = 'https://www.gjtool.cn/pdfh5/git.pdf'
               //下载文件
               wx.downloadFile({
               url: link,
               success (res) {
               if (res.statusCode === 200) {
                   //重新改写文件后缀
               wx.getFileSystemManager().saveFile({
                       tempFilePath:res.tempFilePath,
                       //wx.env.USER_DATA_PATH 是微信提供了一个用户文件目录给开发者，开发者对这个目录有完全自由的读写权限
                       filePath:`${wx.env.USER_DATA_PATH}/hello.png`,
                       success(res) {
                       console.log(res.savedFilePath) // res.savedFilePath 为一个本地缓存文件路径
                           //保存图片
                           wx.saveImageToPhotosAlbum({
                               filePath:res.savedFilePath,
                           success(res) {
                                   console.log(res)
                                   console.log('保存图片成功')
                                   //这里可以出个弹窗，给用户提醒，让他去文件管理器里面找到后重命名
                               }
                           })
                       }
                   })
               }
               }
               })
           },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
该代码片段在自己的安卓机上测过了，可以实现。

2.方案二
先使用下载文件api把文件下载下来，再使用wx.openDocument() 打开文件里面加上showMenu字段，然后就可以看到在打开的文件右上角出现了···，

ios表现：ios点击之后会有发送给朋友的选项，选择分享给朋友之后就可以把文件直接发送给对方了，然后你就可以在聊天记录里面拿到这个文件；

安卓表现：安卓手机里面有保存文件的选项；

缺陷：不能 “下载”后直接选择某个文件发给其他人，这个方案每次想发送必须先上小程序找到该文件，下载打开文件再去转发（而且必须是微信好友）；或者在之前转发的聊天记录里面找到该文件。

代码：

           downloadFileOpen(){
               let link = 'https://www.gjtool.cn/pdfh5/git.pdf'
               //下载文件
               wx.downloadFile({
               url: link,
               success (res) {
               if (res.statusCode === 200) {
                       const filePath = res.tempFilePath
                   wx.openDocument({
                   filePath: filePath,
                       showMenu:true, //关键点
                   success: function (res) {
                   console.log('打开文档成功')
                   }
                   })
               }
               }
               })
           }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
安卓具体表现：