微信小程序实现pdf、word等格式文件上传的方法


Posted in Javascript onSeptember 10, 2019

目前微信只支持从聊天记录里面获取文件

一.前言

   目前微信提供了一个接口 wx.chooseMessageFile 它能让用户从聊天记录里面选择一个或者多个文件,然后返回它的一些信息,列入文件的path地址,文件名,文件的大小等.

  获取这些信息再结合微信的上传接口wx.uploadFile,即可实现文件上传.

二.具体实现

     首先需要一个按钮来调用wx.chooseMessageFile.

wx.chooseMessageFile({
  count: 1,  //能选择文件的数量
  type: 'file', //能选择文件的类型,我这里只允许上传文件.还有视频,图片,或者都可以
  success(res) { 
  var size = res.tempFiles[0].size;
  var filename = res.tempFiles[0].filename;
  var newfilename = filename + ""; 
  
 if (size > 4194304||newfilename.indexOf(".pdf")==-1){ //我还限制了文件的大小和具体文件类型
   wx.showToast({
   title: '文件大小不能超过4MB,格式必须为pdf!',
   icon: "none",
   duration: 2000,
   mask: true
   })
  }else{
   that.setData({
   path: res.tempFiles[0].path, //将文件的路径保存在页面的变量上,方便 wx.uploadFile调用
   filename: filename    //渲染到wxml方便用户知道自己选择了什么文件
   })
  }
  }
 })

这样在这里就保存了文件的路径和名称

data: {
 path:'',
 filename:''
 },

然后等用户进行提交的时候,再调用上传的接口

wx.uploadFile({
     url: serverUrl   //上传的路径
     filePath: that.data.path, //刚刚在data保存的文件路径
     name: 'file',   //后台获取的凭据
     success() {   
     wx.showToast({   //做个提示或者别的操作
      title: '',
      icon: "none",
      duration: 5000,
      mask: true,
      success: function (res) {
      
      }
     })
}
})

这样前段就完成实现了

后台获取的文件是一个.tmp结尾的临时文件

然后就可以通过IO流将文件保存到你想保存的位置上去,就可以了.

总结

以上所述是小编给大家介绍的微信小程序实现pdf、word等格式文件上传的方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
javascript对象的property和prototype是这样一种关系
Mar 24 Javascript
javascript firefox不显示本地预览图片问题的解决方法
Nov 12 Javascript
在IE6下发生Internet Explorer cannot open the Internet site错误
Jun 21 Javascript
JavaScript中for-in遍历方式示例介绍
Feb 11 Javascript
javascript回车完美实现tab切换功能
Mar 13 Javascript
JavaScript动态提示输入框输入字数的方法
Jul 27 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
SpringMVC简单整合Angular2的示例
Jul 31 Javascript
Vue中使用vue-i18插件实现多语言切换功能
Apr 25 Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
JS无限级导航菜单实现方法
Jan 05 Javascript
解决vue单页面应用打包后相对路径、绝对路径相关问题
Aug 14 Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 #Javascript
layui表格内放置图片,并点击放大的实例
Sep 10 #Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 #Javascript
es6中reduce的基本使用方法
Sep 10 #Javascript
layui导出所有数据的例子
Sep 10 #Javascript
解决layui-open关闭自身窗口的问题
Sep 10 #Javascript
layui下拉框获取下拉值(select)的例子
Sep 10 #Javascript
You might like
基于xcache的配置与使用详解
2013/06/18 PHP
phpmailer简单发送邮件的方法(附phpmailer源码下载)
2016/06/13 PHP
利用PHP实现一个简单的用户登记表示例
2017/04/25 PHP
Laravel学习教程之IOC容器的介绍与用例
2017/08/15 PHP
纯js实现的论坛常用的运行代码的效果
2008/07/15 Javascript
JS 加入收藏夹的代码(主流浏览器通用)
2013/05/13 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
jQuery实现渐变弹出层和弹出菜单的方法
2015/02/20 Javascript
javascript实现的简单计时器
2015/07/19 Javascript
JS实现仿苹果底部任务栏菜单效果代码
2015/08/28 Javascript
详解nodejs 文本操作模块-fs模块(三)
2016/12/22 NodeJs
Vue数据驱动模拟实现2
2017/01/11 Javascript
js实现简单的二级联动效果
2017/03/09 Javascript
nodejs和C语言插入mysql数据库乱码问题的解决方法
2017/04/14 NodeJs
js实现音乐播放控制条
2017/09/09 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
详解小程序中h5页面onShow实现及跨页面通信方案
2019/05/30 Javascript
搭建一个Koa后端项目脚手架的方法步骤
2019/05/30 Javascript
javascript设计模式 ? 原型模式原理与应用实例分析
2020/04/10 Javascript
Python实现常见的回文字符串算法
2018/11/14 Python
给我一面国旗 python帮你实现
2019/09/30 Python
python如何通过pyqt5实现进度条
2020/01/20 Python
python实现文法左递归的消除方法
2020/05/22 Python
Django配置跨域并开发测试接口
2020/11/04 Python
python中pdb模块实例用法
2021/01/15 Python
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
性能服装:HYLETE
2018/08/14 全球购物
教师研修随笔感言
2014/01/23 职场文书
总经理司机职责
2014/02/02 职场文书
社团活动总结
2014/04/28 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
合伙购房协议样本
2014/10/06 职场文书
党性教育心得体会(共6篇)
2016/01/21 职场文书
《花钟》教学反思
2016/02/17 职场文书
Python趣味实战之手把手教你实现举牌小人生成器
2021/06/07 Python