微信小程序实现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页面顶部卷动广告效果
Dec 01 Javascript
js控制的遮罩层实例介绍
May 29 Javascript
JS 毫秒转时间示例代码
Sep 22 Javascript
javascript解析json数据的3种方式
May 08 Javascript
Node.js中使用Buffer编码、解码二进制数据详解
Aug 16 Javascript
一个JavaScript操作元素定位元素的实例
Oct 29 Javascript
九种原生js动画效果
Nov 11 Javascript
jquery的父、子、兄弟节点查找,节点的子节点循环方法
Dec 07 Javascript
JS代码实现电脑配置检测功能
Mar 21 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
vue实现鼠标移过出现下拉二级菜单功能
Dec 12 Javascript
vue 弹出遮罩层样式实例
Jul 22 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
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
PHP OPP机制和模式简介(抽象类、接口和契约式编程)
2014/06/09 PHP
PHP+shell实现多线程的方法
2015/07/01 PHP
PHP编辑器PhpStrom运行缓慢问题
2017/02/21 PHP
使用PHP反射机制来构造"CREATE TABLE"的sql语句
2019/03/21 PHP
Alliance vs Liquid BO3 第三场2.13
2021/03/10 DOTA
jQuery MD5加密实现代码
2010/03/15 Javascript
js 绑定带参数的事件以及手动触发事件
2010/04/27 Javascript
EXTjs4.0的store的findRecord的BUG演示代码
2013/06/08 Javascript
JS求平均值的小例子
2013/11/29 Javascript
Ajax提交与传统表单提交的区别说明
2014/02/07 Javascript
iframe调用父页面函数示例详解
2014/07/17 Javascript
浅谈JavaScript函数节流
2014/12/09 Javascript
js与css实现弹出层覆盖整个页面的方法
2014/12/13 Javascript
js实现文字闪烁特效的方法
2015/12/17 Javascript
JS获取时间的相关函数及时间戳与时间日期之间的转换
2016/02/04 Javascript
jQuery实现动态添加tr到table的方法
2016/12/26 Javascript
bootstrapValidator 重新启用提交按钮的方法
2017/02/20 Javascript
微信小程序 生命周期函数详解
2017/05/24 Javascript
vue element-ui 绑定@keyup事件无效的解决方法
2018/03/09 Javascript
微信小程序踩坑记录之解决tabBar.list[3].selectedIconPath大小超过40kb
2018/07/04 Javascript
nuxt.js中间件实现拦截权限判断的方法
2018/11/21 Javascript
微信小程序实现菜单左右联动
2020/05/19 Javascript
讲解python参数和作用域的使用
2013/11/01 Python
神经网络python源码分享
2017/12/15 Python
Python3实现的判断环形链表算法示例
2019/03/07 Python
Python 存储字符串时节省空间的方法
2019/04/23 Python
Tensorflow的梯度异步更新示例
2020/01/23 Python
Python如何急速下载第三方库详解
2020/11/02 Python
aden + anais官方网站:婴儿襁褓、毯子、尿布和服装
2017/06/21 全球购物
Kiwi.com中国:找到特价机票并发现新目的地
2019/10/27 全球购物
大学生励志演讲稿
2014/04/25 职场文书
国庆促销活动总结
2014/08/29 职场文书
亮剑观后感500字
2015/06/05 职场文书
python中pandas对多列进行分组统计的实现
2021/06/18 Python
Python 匹配文本并在其上一行追加文本
2022/05/11 Python