(小程序篇)14.pdf文件上传预览

1,794 阅读1分钟

说明:小程序开发过程中我们会遇到需要上传pdf文件的需求

1.实现思路

上传

  • 调用小程序api获取文件临时地址
  • 临时地址传到服务器,获取线上地址
  • url地址保存随接口一起传给接口

预览

  • 获取服务器上的url地址
  • 调用小程序api来进行打开pdf文件

2."上传" 部分代码

.js

  wx.chooseMessageFile({
    type: 'file',
    count: 1,
    success: res=>{
    	let tempPath = res.tempFiles[0].path;
        // ...
        // 发起上传文件请求 PS:后面补充封装上传文件,类似图片上传
        // ...
        wx.uploadFile({
          url: 'https://example.weixin.qq.com/upload', //仅为示例,非真实的接口地址
          filePath: tempPath,
          name: 'file',
          formData: {
            'user': 'test'
          },
          success (res){
            const data = res.data
            //do something
          }
        })
      }
    }
  })

3."预览"部分代码

.js

// 预览pdf
previewPDF(){
  let fileUrl = this.data.fileUrl;
  // 需要先下载
  wx.downloadFile({
    url: fileUrl,
    success: res => {
      let filePath = res.tempFilePath; //微信临时文件路径
      wx.openDocument({
        filePath: filePath, 
        showMenu: false,  //是否显示右上角菜单按钮  默认为false
        success: function (res) {

        },
        fail: function(error){

        }
      })
    }
  })
}