微信小程序实现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 相关文章推荐
用JS实现一个TreeMenu效果分享
Aug 28 Javascript
jQuery Ajax异步处理Json数据详解
Nov 05 Javascript
js动态添加删除,后台取数据(示例代码)
Nov 25 Javascript
javascript:window.open弹出窗口的位置问题
Mar 18 Javascript
JavaScript onkeydown事件入门实例(键盘某个按键被按下)
Oct 17 Javascript
新闻上下滚动jquery 超简洁(必看篇)
Jan 21 Javascript
详解在Vue中使用TypeScript的一些思考(实践)
Jul 06 Javascript
利用node 判断打开的是文件 还是 文件夹的实例
Jun 10 Javascript
对layui初始化列表的CheckBox属性详解
Sep 13 Javascript
ES6 Generator基本使用方法示例
Jun 06 Javascript
vuex实现购物车功能
Jun 28 Javascript
浅谈TypeScript 索引签名的理解
Oct 16 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
PHP 飞信好友免费短信API接口开源版
2010/07/22 PHP
PHP中的session永不过期的解决思路及实现方法分享
2011/04/20 PHP
基于session_unset与session_destroy的区别详解
2013/06/03 PHP
PHP的数组中提高元素查找与元素去重的效率的技巧解析
2016/03/03 PHP
PHP更安全的密码加密机制Bcrypt详解
2017/06/18 PHP
浅析PHP开发规范
2018/02/05 PHP
php中如何执行linux命令详解
2018/11/06 PHP
PHP的mysqli_stat()函数讲解
2019/01/23 PHP
yii2 开发api接口时优雅的处理全局异常的方法
2019/05/14 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
php查看一个变量的占用内存的实例代码
2020/03/29 PHP
javascript 异常处理使用总结
2009/06/21 Javascript
JQUERY 浏览器判断实现函数
2009/08/20 Javascript
原生javascript图片自动或手动切换示例附演示源码
2013/09/04 Javascript
按下回车键指向下一个位置的一个函数代码
2014/03/10 Javascript
基于MVC4+EasyUI的Web开发框架形成之旅之界面控件的使用
2015/12/16 Javascript
Bootstrap Validator 表单验证
2016/07/25 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
JS中精巧的自动柯里化实现方法
2017/12/12 Javascript
微信公众号平台接口开发 菜单管理的实现
2019/08/14 Javascript
JS使用for in有序获取对象数据
2020/05/19 Javascript
解决Echarts 显示隐藏后宽度高度变小的问题
2020/07/19 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
Python的词法分析与语法分析
2013/05/18 Python
使用wxpython实现的一个简单图片浏览器实例
2014/07/10 Python
Python 处理数据的实例详解
2017/08/10 Python
Python实现matplotlib显示中文的方法详解
2018/02/06 Python
python日志模块logbook使用方法
2019/09/19 Python
豪华复古化妆:Besame Cosmetics
2019/09/06 全球购物
2013年大学生的自我鉴定
2013/10/24 职场文书
采购部主管岗位职责
2014/01/01 职场文书
高中生家长会演讲稿
2014/01/14 职场文书
超市创业计划书
2014/09/15 职场文书
2014年群众路线教育实践活动整改措施
2014/09/24 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
2016年春季趣味运动会开幕词
2016/03/04 职场文书