微信小程序文件上传及下载预览

2019-01-07 10:44:35  卢浮宫  版权声明：本文为站长原创文章，转载请写明出处

一、前言

    之前写了微信小程序上传录音文件，然后产品要做一个附件，可以上传word文档pdf等，还要支持文件预览

二、官网查了一下：    

    
    wx.openDocument(Object object)

        新开页面打开文档

      参数 Object object

object.fileType 的合法值

PS:也就是说腾讯官方是支持多样文件打开的，于是在服务器上做了一个测试，放置word文档，小程序中请求

    xaTest(){
        wx.downloadFile({
          url:"https://XXXX.com/Wxsynchro/static/file/test.docx",
          success(res) {
            const filePath = res.tempFilePath
            console.log(filePath);
            wx.openDocument({
              filePath: filePath,
              fileType:"docx",
              success(res) {
                console.log("打开文档成功")
              },
              fail(res) {
                console.log(res);
              }
            })
          },
          fail(res){
            console.log(res);
          }
        })
      }

    这样在小程序中就可以直接打开了，（PS：微信是把文件内容解析成html页面的，没有通过外部程序打开，这一点还是挺不错的。）

三、文件上传

    剩下的就是文件上传了，有了之前上传录音文件的经验，本来应该很好写的，但是发现没有文件选择器可供使用。

也就是说微信小程序中提供了，媒体文件的选择（照片、录音、视频）但是就没有其他类型支持了，社区查了一些帖子说是chooseFile正在做...

加上微信不允许有原生file组件，所以上传这个问题就不了了之了。

四、后续解决方案

    但是还是有一个解决方案，就是在服务器中写一个上传页面里面使用file标签来进行文件选择。微信小程序中支持如下

    web-view

基础库 1.6.4 开始支持，低版本需做兼容处理。

    web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。

客户端 6.7.2 版本开始，navigationStyle: custom 对 <web-view> 组件无效

     示例代码：

  
  <!-- wxml --> <!-- 指向微信公众平台首页的web-view --> <web-view src="https://mp.weixin.qq.com/"></web-view>