首页 > 编程语言 >微信小程序文件预览和下载-文件系统

微信小程序文件预览和下载-文件系统

时间:2023-11-25 21:55:36浏览次数:46  
标签:function 文件 预览 微信 文件系统 文件夹 res 下载 wx

文件预览和下载

在下载之前,我们得先调用接口获取文件下载的url
然后通过wx.downloadFile将下载文件资源到本地

wx.downloadFile({
   url: res.data.url,
   success: function (res) {
      console.log('数据',res);
   }
})

tempFilePath就是临时临时文件路径。
通过wx.openDocument打开文件。
showMenu表示预览文件右上方的菜单,你可以在该菜单中选择保存文件,将文件显示的保存到本地。

// 预览和下载
wx.downloadFile({
   url: res.data.url,
   success: function (res) {
      const filePath = res.tempFilePath  // 临时文件路径
      wx.openDocument({
         filePath: filePath,
         showMenu: true // 预览文件右上方的...
      })
    }
})

到这里文件的预览和存储就完成了,你可以显示的看到文件的存储位置。
这是文件操作的其中一种方式,如果你要具体的操作文件,请继续向下看。


文件系统

文件系统是这篇着重要讲的,其实在上文中提到的wx.downloadFile这一步就是文件下载的关键,文件下载成功(临时)会触发success回调,你可以通过DownloadTask监听文件下载的进度,当downloadTask进度为100时,downloadFilesuccess下载成功就会被触发。

      const downloadTask = wx.downloadFile({
        url: res.data.url,
        success: function (res) {
          // progress进度100时触发success
        }
      })
      downloadTask.onProgressUpdate((res) => {
        console.log('下载进度', res.progress)
        console.log('已经下载的数据长度', res.totalBytesWritten)
        console.log('预期需要下载的数据总长度', res.totalBytesExpectedToWrite)
      })

wx.downloadFiletempFilePath对应的就是临时文件的存储位置,这个文件是会被删除的。因此如果你需要持久化文件,则需要调用saveFile来保存文件。同时tempFilePath也可以作为一个中转,为后续使用资源提供支持,所以我们在后续调用wx.openDocument时,tempFilePath其实是做了文件中转,在openDocument对文件做了后续的保存或预览操作。

微信小程序本身自带一个文件系统,官网介绍:文件系统

在文件系统中有关于本地临时文件的介绍:

本地临时文件只能通过调用特定接口产生,不能直接写入内容。本地临时文件产生后,仅在当前生命周期内保证有效,重启之后不一定可用。如果需要保证在下次启动时无需下载,可通过 FileSystemManager.saveFile()FileSystemManager.copyFile() 接口把本地临时文件转换成本地缓存文件或本地用户文件。

在上文中我们将wx.downloadFile返回的临时路径当作中转,调用wx.openDocument来保存文件,这是一种方法,还有一种就是操作文件系统API,对临时文件进行移动、保存、复制等操作。

下面我们通过文件系统来实现文件的保存:

API文档:wx.getFileSystemManager()

流程如下:

1、获取文件下载url

2、wx.downloadFile下载文件

3、判断文件夹是否存在:

  • 存在:通过saveFile直接下载
  • 不存在:通过mkdir创建文件夹,创建完成后,通过saveFile直接下载
  async downloadPdf(id) {
    let that = this;
    let res = await getPdfAPI(id);
    // 下载文件
    wx.downloadFile({
      url: res.data.url,
      success: async (res) => {
        // 设置存储路径
        let myPath = wx.env.USER_DATA_PATH + '/MyFile'
        try {
          // 判断文件夹是否存在
          await that.fileExist(myPath)
          // 存在: 保存文件到本地
          await that.fileSave(res.tempFilePath, myPath).catch(err => console.log(err));
          wx.showToast({
            title: '保存成功',
            icon: 'none'
          })
        } catch (e) {
          // 不存在: 创建文件夹
          await that.fileMkdir(myPath).catch(err => console.log(err));
          // 保存文件到本地
          await that.fileSave(res.tempFilePath, myPath).catch(err => console.log(err));
          wx.showToast({
            title: '保存成功',
            icon: 'none'
          })
        }
      }
    })
  },

  // 保存文件
  fileSave(tempFilePath, myPath) {
    return new Promise(function (resolve, reject) {
      const fileManager = wx.getFileSystemManager(); // 文件系统
      fileManager.saveFile({
        tempFilePath: tempFilePath, // 临时文件路径
        filePath: myPath + '/myFileName.pdf',  // 文件夹路径 + 文件名
        success: function (res) {
          resolve(res)
        },
        fail: function (err) {
          reject(err)
        }
      })
    })
  },

  // 创建文件夹
  fileMkdir(myPath) {
    return new Promise(function (resolve, reject) {
      const fileManager = wx.getFileSystemManager(); // 文件系统
      fileManager.mkdir({
        dirPath: myPath, // 文件夹路径
        success: function (mkdir) {
          resolve(mkdir)
        },
        fail: function (mkdirerr) {
          reject(mkdirerr)
        }
      })
    })
  },

  // 判断文件夹是否存在
  fileExist(myPath) {
    return new Promise(function (resolve, reject) {
      const fileManager = wx.getFileSystemManager(); // 文件系统
      fileManager.access({
        path: myPath,  // 文件夹路径
        success: function (exist) {
          resolve(exist)
        },
        fail: function (err) {
          reject(err)
        }
      })
    })
  },

注意点:

1、saveFile自定义保存路径filePath文件夹路径+文件名的拼接

2、saveFile接收的文件路径为wx.downloadFile获取的临时路径tempFilePath

3、wx.env.USER_DATA_PATH是一个字符串,表示文件系统中的用户目录路径 (本地路径)

关于存储位置:

PC端中:

wx.env.USER_DATA_PATH默认指向usr文件夹,微信开发者工具中可以看到保存路径:

真机中:
真机的默认存储位置为:内部存储/Android/data/com.tencent.mm/MicroMsg/wxanewfiles/
也就是wxanewfiles文件夹下的子文件夹,该文件夹不固定


参考文档:
wx.downloadFile
wx.openDocument
DownloadTask
wx.env
文件系统
wx.getFileSystemManager()
FileSystemManager.mkdir(Object object)
FileSystemManager.saveFile(Object object)
FileSystemManager.access(Object object)


如果你觉得本文章不错,欢迎点赞

标签:function,文件,预览,微信,文件系统,文件夹,res,下载,wx
From: https://www.cnblogs.com/wang-fan-w/p/17856185.html

相关文章

  • 基于微信小程序的酒店管理系统设计与实现(源码+lw+部署文档+讲解等)
    (文章目录)详细视频演示请联系我获取更详细的演示视频具体实现截图[外链图片转存中...(img-Lkna8qpn-1700727246356)]技术栈后端框架SpringBootSpringBoot内置了Tomcat、Jetty和Undertow等服务器,这意味着你可以直接使用它们而不需要额外的安装和配置。SpringBoot的一......
  • 微信小程序 文字换行设置
    在wxml中的样式为block时,通过设置包裹文字的view的样式可达到换行,设置的属性为:word-break: break-word; 例:wxml和wxss<viewclass="text-format">超出的文字,超出的文字,超出的文字,超出的文字,超出的文字,超出的文字,<view>.text-form{word-break:break-word;......
  • 微信小程序--页面间传递数据的方式
    一、设置为全局变量,在另一个页面再获取这个变量 二、通过wx.navigateTo()的url传值 三、通过wx.navigateTo()的success建立一条数据通道传递数据的页面data:{data1:"第一个页面的值"},//在wxml页面设置一个按钮,并绑定事件dddddd:function(){va......
  • 使用 pdf.js 在线预览 pdf 文件
    1、下载 https://github.com/mozilla/pdf.js/releases2、解压后得到build和web两个文件夹3、将其放入网站目录下4、使用web中的viewer.html即可在线预览pdf文件viewer.html?file=xxx.pdf5、无法加载请检查是否有相应的mime配置(mjs、ftl)......
  • 用企业微信测试的坑........
    企业微信的授权登录流程讲解在这里这里使用微信开发者工具进行获取code的时候会提示错误信息,反正就是无法获取到,无法进行调试,就很烦这个东西后来才知道得在我这个图是网上冲浪顺的哈哈企业微信web开发者调试工具在我的企业找1.微工作台2.开启开发者工具,并点击web开发工具。......
  • uniapp-微信小程序绑定动态样式 :style 避坑
    在uniapp中绑定动态样式:style="object"使用此种方法,在H5页面中并不会出现任何问题而在微信小程序中,此种方式就会被编译成 style="[object,object]"从而导致样式无法生效解决方法:    使用:style="[object]"此种方式即可......
  • 微信小程序隐藏导航栏首页按钮
    隐藏“返回首页”按钮1、微信7.0.7版本起,当用户打开的小程序最底层页面是非首页时,默认展示“返回首页”按钮,开发者可在页面onShow中调用hideHomeButton进行隐藏。asynconShow(){uni.hideHomeButton()},2、uniapp通过pages.json隐藏返回首页”按钮{......
  • 文件系统和目录
    目录文件系统和目录理论文件目录Linxu命令C程序设计读取文本文件和二进制文件的通用方式读取文本文件的方式顺序读写,随机读写到你了,怎么写文件安全问题Python程序设计文件系统和目录理论我们前面介绍过(Computer.Science.Illuminated.7th.CN.计算机科学概论第五章)冯·诺伊曼体系......
  • 获取微信版本、手机操作系统、手机类型
    效果图letsystem={}letuserAgent=navigator.userAgent//获取微信版本letsystemInfo=userAgent.match(/MicroMessenger.*?(?=)/)if(systemInfo&&systemInfo.length>0){system.wechat=systemInfo[0]}//苹果手机......
  • 企业微信——给国外的邮箱发邮件报错Authentication results: DKIM = did not pass
    前言发件人([email protected])域名的DNS记录未设置或设置错误导致对方拒收此邮件。hostgmail-smtp-in.l.google.com[172.253.118.27]said:550-5.7.26Thismailhasbeenblockedbecausethesenderisunauthenticated.Gmailrequiresallsenderstoauthenticatewitheither......