微信小程序中保存文件

980 阅读2分钟

当前项目需求,PDF/word/PPT格式的文件即可以预览,又可以下载到手机中。小程序中关于预览文件是有现成的API的,代码如下:

// 将文件下载到手机临时内存中,此时文件名为随机字符串
wx.downloadFile({
    //文件url
    url: 'http://xxxxx.pdf',
    success: function(res) {
        // 临时路径
        const filePath = res.tempFilePath
        // 打开本地文件
        wx.openDocument({
            filePath,
            success(res) {
               console.log(res)
            },
            fail(err) {
               console.log(err);
            }
        })
    })
})

预览功能的确可以实现了,紧接着又发现了两个问题:

  1. 当前文件无法下载到手机的真实存储中
  2. 预览时的文件名为随机字符串,特别长且奇丑无比

针对于以上两个问题,研究了好一会又推出了方案二(终极方案):

// 下载文件到手机内存中,此时文件名为随机字符串
wx.downloadFile({
    //文件url
    url: 'http://xxxxx.pdf',
        success: function(res) {
            // 临时路径
            const filePath = res.tempFilePath
            //将该文件从临时路径 tempFilePath 转移到本地文件 filePath中
            const fileSystemManager = wx.getFileSystemManager()
            fileSystemManager.saveFile({
                // downloadFile的临时路径
                tempFilePath: filePath,
                // 指定存储位置及文件名
                filePath: wx.env.USER_DATA_PATH + '/test.doc',
                success(res) {
                    // 打开本地文件
                    wx.openDocument({
                        // 本地文件路径
                        filePath: res.savedFilePath,
                        // 右上角的设置按钮,可以有转发、保存到本地等功能
                        showMenu: true,
                        success(res) {
                                console.log(res)
                        },
                        fail(err) {
                                console.log(err);
                        }
                    })
                },
                fail(err) {
                        console.log(err);
                }
            })
        }
    })
}

以上代码完美解决以上两个问题:

  1. 问题1解决方案:wx.openDocument配置showMenu参数,只有通过微信提供的方法,才会真正下载到手机存储中。
  2. 问题2解决方案:fileSystemManager.saveFile将文件下载到小程序中,可以指定文件名。

最让我费解的是fileSystemManager.saveFile这个方法,说是将文件下载到本地,其实根本不是手机的存储中,而是专属于小程序的一块特殊空间

打个比方(个人理解),微信相当于安卓系统,小程序相当于安装的APP:

  1. fileSystemManager.saveFile相当于 localStorage,关掉小程序后再进入文件依然存在,但删除小程序后就不存在了(卸载APP)。
  2. wx.downloadFile相当于 sessionStorage,关掉小程序后再进入就不存在了(退出APP)。