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

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


一、前言

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


二、官网查了一下:    

    
    wx.openDocument(Object object)

        新开页面打开文档

      参数 Object object

属性 类型 默认值 必填 说明
filePath string 文件路径,可通过 downloadFile 获得
fileType string 文件类型,指定文件类型打开文件
success function 接口调用成功的回调函数
fail function 接口调用失败的回调函数
complete function 接口调用结束的回调函数(调用成功、失败都会执行)


object.fileType 的合法值

说明
doc doc 格式
docx docx 格式
xls xls 格式
xlsx xlsx 格式
ppt ppt 格式
pptx pptx 格式
pdf pdf 格式


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> 组件无效


属性名 类型 默认值 说明
src String webview 指向网页的链接。可打开关联的公众号的文章,其它网页需登录小程序管理后台配置业务域名。
bindmessage EventHandler 网页向小程序 postMessage 时,会在特定时机(小程序后退、组件销毁、分享)触发并收到消息。e.detail = { data }
bindload EventHandler 网页加载成功时候触发此事件。e.detail = { src }
binderror EventHandler 网页加载失败的时候触发此事件。e.detail = { src }

   

     示例代码:

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

那么所有的业务逻辑就可以在服务器页面进行了。

 

五、后记

    思路如上,考虑到用户提要及其他问题暂不进行,后续若有用到再持续更新






更多精彩请关注guangmuhua.com


最新评论: