微信小程序实现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 读取XML数据,在页面中展现、编辑、保存的实现
Oct 27 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
Apr 21 Javascript
jQuery解决下拉框select设宽度时IE 6/7/8下option超出显示不全
May 27 Javascript
jQuery实现字符串按指定长度加入特定内容的方法
Mar 11 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
原生js实现倒计时--2018
Feb 21 Javascript
js a标签点击事件
Mar 30 Javascript
webpack打包后直接访问页面图片路径错误的解决方法
Jun 17 Javascript
JavaScript实现微信号随机切换代码
Mar 09 Javascript
JavaScript使用小插件实现倒计时的方法讲解
Mar 11 Javascript
js实现验证码功能
Jul 24 Javascript
浅谈Vue开发人员的7个最好的VSCode扩展
Jan 20 Vue.js
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
PHP 批量删除数据的方法分析
2009/10/30 PHP
php抓取页面的几种方法详解
2013/06/17 PHP
解析php中获取url与物理路径的总结
2013/06/21 PHP
PHP修改session_id示例代码
2014/01/08 PHP
php验证码生成代码
2015/11/11 PHP
PDO::errorInfo讲解
2019/01/28 PHP
我也种棵OO树JXTree[js+css+xml]
2007/04/02 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
2012/03/01 Javascript
js简单实现根据身份证号码识别性别年龄生日
2013/11/29 Javascript
javascript 构造函数方式定义对象
2015/01/02 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
JS更改select内option属性的方法
2015/10/14 Javascript
最简单的JavaScript图片轮播代码(两种方法)
2015/12/18 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
js判断PC端与移动端跳转
2020/12/24 Javascript
ES6新特性之模块Module用法详解
2017/04/01 Javascript
webpack项目调试以及独立打包配置文件的方法
2018/02/28 Javascript
vue-cli开发环境实现跨域请求的方法
2018/04/07 Javascript
解决vue props 拿不到值的问题
2018/09/11 Javascript
vue中的watch监听数据变化及watch中各属性的详解
2018/09/11 Javascript
Antd-vue Table组件添加Click事件,实现点击某行数据教程
2020/11/17 Javascript
[01:21]2018DOTA2亚洲邀请赛4.5采访 打DOTA2也能有女朋友?
2018/04/06 DOTA
Python交换变量
2008/09/06 Python
PyTorch实现ResNet50、ResNet101和ResNet152示例
2020/01/14 Python
python中adb有什么功能
2020/06/07 Python
Python importlib模块重载使用方法详解
2020/10/13 Python
分享一枚pycharm激活码适用所有pycharm版本我的pycharm2020.2.3激活成功
2020/11/20 Python
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
澳洲的UGG雪地靴超级市场:Uggs.com.au
2020/04/06 全球购物
三八活动策划方案
2014/08/17 职场文书
2015年全国助残日活动方案
2015/05/04 职场文书
2015年幼儿园国庆节活动总结
2015/07/30 职场文书
Anaconda安装pytorch及配置PyCharm 2021环境
2021/06/04 Python
python中24小时制转换为12小时制的方法
2021/06/18 Python
MySQL 1130异常,无法远程登录解决方案详解
2021/08/23 MySQL