微信小程序使用wx.openDocument打开文件时报fail filetype not supported

需要做一下关于简历上传并预览简历的功能。简历的上传,我用的是web-view。预览功能使用的是wx.openDocument。但是使用这个API,必须先使用wx.downloadFile进行下载,获取到临时目录,代码如下:

     //下载简历
    wx.downloadFile({
      url: "https://test/test.pdf", //仅为测试接口,并非真实的
      success: function (res) {
        var filePath = res.tempFilePath
        console.log(filePath)

        wx.openDocument({
          filePath: filePath,
          success: function (res) {
            console.log("打开文档成功")
            console.log(res);
          },
          fail: function (res) {
            console.log("fail");
            console.log(res)
          },
          complete: function (res) {
            console.log("complete");
            console.log(res)
          }
        })
      },
      fail: function (res) {
        console.log('fail')
        console.log(res)
      },
      complete: function (res) {
        console.log('complete')
        console.log(res)
      }
    })

但是一直会报fail filetype not supported
这里写图片描述

百度了很久,网上说的是文件类型格式的大小写问题等,但是一直没有解决,就去重新看了官方文档,发现了一个参数
这里写图片描述
这里面有个可选的fileType,然后,我就试着在代码里面加上fileType: 'pdf'

然后的然后,文档可以正确打开了。。。也是醉了呢。

附上我的完整代码

     //下载简历
    wx.downloadFile({
      //app.globalData.resume 这是我从接口获取的文档路径
      url: "https://test/"+app.globalData.resume,
      success: function (res) {
        var filePath = res.tempFilePath

        console.log(filePath)

        // app.globalData.fileType 这是我从接口获取的文档的类型
        wx.openDocument({
          filePath: filePath,
          fileType: app.globalData.fileType,
          success: function (res) {
            console.log("打开文档成功")
            console.log(res);
          },
          fail: function (res) {
            console.log("fail");
            console.log(res)
          },
          complete: function (res) {
            console.log("complete");
            console.log(res)
          }
        })
      },
      fail: function (res) {
        console.log('fail')
        console.log(res)
      },
      complete: function (res) {
        console.log('complete')
        console.log(res)
      }
    })

第一次做小程序的文件上传与打开,如有不当,还请谅解

  • 17
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 10
    评论
⼩程序下载⽂件并预览 需求分析 最近优化了个原先写过的需求,回头复习复习⼩程序的 API 是这样的,我需要下载⼀个⽂件并打开此⽂件 优化:记录是否被下载过,如果下载过就直接打开 获取⽂件下载链接,打开⽂件 wx.downloadFile({ url: `${pic.meetingUrl}/weixin/noticeStart/downLoad/${this.selectItem.recordId}`, // 下载资源的 url success: (res) => { wx.openDocument({ filePath: res.tempFilePath, // ⽂件路径,可通过 downloadFile 获得, fileType: 'pdf', // 写下载后的⽂件的格式,这⾥距离是pdf success: (res) => { }, fail: (error) => { }, }); }, fail: () => {}, complete: () => {}, }); 优化 思路:保存下载后的⽂件,保存其路径到本地缓存,然后下次打开的时候判断⼀下本地缓存⾥是否有,如果有就打开,本地缓存没有的话, 就先下载在打开。 const that = this; const cacheFilePath = wx.getStorageSync( `filePath-${this.selectItem.recordId}` ); // 先判断这个⽂件是否下载过 // 如果下载过,尝试通过缓存,打开⽂件 // 否则就要下载,下载成功后保存本地缓存(临时路径信息),命名规则为 filePath + recordId if (cacheFilePath) { wx.openDocument({ filePath: cacheFilePath, //⽂件路径,可通过 downFile 获得, fileType: this.selectItem.fileType, // 获取⽂件格式 success: (res) => { }, fail: (error) => { }, }); } else { wx.showLoading({ title: "下载中", mask: true, }); wx.downloadFile({ url: `${pic.meetingUrl}/weixin/noticeStart/downLoad/${this.selectItem.recordId}`, // 下载资源的 url success: (res) => { // 隐藏 loading wx.hideLoading(); // 下载成功后,保存⽂件路径到本地缓存 wx.setStorageSync( `filePath-${this.selectItem.recordId}`, `${res.tempFilePath}` ); // 尝试打开下载后的⽂件 wx.openDocument({ filePath: res.tempFilePath, //⽂件路径,可通过 downFile 获得, fileType: this.selectItem.fileType, // 获取⽂件格式 success: (res) => { }, fail: (error) => { }, }); }, fail: () => {}, complete: () => {}, }); }
如果您不想使用 `uni.openDocument` API 打开文件,您可以考虑使用其他方式打开文件,比如使用第三方插件或者自定义组件等。 以下是两个示例: 1. 使用第三方插件: 可以使用 uni-app 社区中的一些第三方插件来实现打开文件的功能,例如 `uni-file-picker` 插件。这个插件可以选择文件并返回文件的本地路径,您可以使用这个路径来打开文件。 安装插件: ``` npm install uni-file-picker --save ``` 使用插件: ```javascript import filePicker from 'uni-file-picker' // 选择文件 filePicker.chooseFile({ success: (res) => { // res.tempFilePaths 为文件的本地临时路径 // 这里可以使用自己的方式打开文件 } }) ``` 2. 自定义组件: 您可以自定义一个组件来实现打开文件的功能。在组件中,可以使用 `wx.chooseMessageFile` API 选择文件并返回文件的临时路径,然后使用 `wx.openDocument` API 打开文件。 组件示例: ```html <template> <button @click="openFile">打开文件</button> </template> <script> export default { methods: { openFile() { wx.chooseMessageFile({ count: 1, type: 'file', success: (res) => { wx.openDocument({ filePath: res.tempFiles[0].path, fileType: 'txt', success: () => { console.log('打开文件成功') }, fail: () => { console.log('打开文件失败') } }) }, fail: () => { console.log('选择文件失败') } }) } } } </script> ``` 注意:在使用 `wx.chooseMessageFile` 和 `wx.openDocument` API 时,需要将 `type` 和 `fileType` 参数设置为要打开的文件类型,这里以打开 txt 文件为例,需要将类型设置为 `file`,文件类型设置为 `txt`。
评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值