微信小程序实现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 相关文章推荐
关于__defineGetter__ 和__defineSetter__的说明
May 12 Javascript
jquery nth-child()选择器的简单应用
Jul 10 Javascript
javascript使用activex控件的代码
Jan 27 Javascript
JS HTML5 音乐天气播放器(Ajax获取天气信息)
May 26 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
Sep 09 Javascript
Bootstrap table简单使用总结
Feb 15 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
Vue+mui实现图片的本地缓存示例代码
May 24 Javascript
微信小程序CSS3动画下拉菜单效果
Nov 04 Javascript
js实现图片实时时钟
Jan 15 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
Mar 25 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
PHP5多态性与动态绑定介绍
2015/04/03 PHP
PHP实现登陆表单提交CSRF及验证码
2017/01/24 PHP
php写一个函数,实现扫描并打印出自定目录下(含子目录)所有jpg文件名
2017/05/26 PHP
RSA实现JS前端加密与PHP后端解密功能示例
2019/08/05 PHP
如何让您的中波更粗更长 - 中波框形天线制作
2021/03/10 无线电
json数据处理技巧(字段带空格、增加字段、排序等等)
2013/06/14 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
JavaScript中创建对象和继承示例解读
2014/02/12 Javascript
在Ubuntu系统上安装Ghost博客平台的教程
2015/06/17 Javascript
详解AngularJS Filter(过滤器)用法
2015/12/28 Javascript
原生js实现日期计算器功能
2017/02/17 Javascript
详解vuelidate 对于vueJs2.0的验证解决方案
2017/03/09 Javascript
vue-cli+webpack记事本项目创建
2017/04/01 Javascript
Vuejs入门教程之Vue生命周期,数据,手动挂载,指令,过滤器
2017/04/19 Javascript
详解vue指令与$nextTick 操作DOM的不同之处
2018/08/02 Javascript
iview在vue-cli3如何按需加载的方法
2018/10/31 Javascript
python编程开发之日期操作实例分析
2015/11/13 Python
Python实现统计给定列表中指定数字出现次数的方法
2018/04/11 Python
浅谈django rest jwt vue 跨域问题
2018/10/26 Python
对python For 循环的三种遍历方式解析
2019/02/01 Python
python list转置和前后反转的例子
2019/08/26 Python
关于Python字符串显示u...的解决方式
2020/03/06 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
你不知道的葡萄干处理法、橙蜜处理法、二氧化碳酵母法
2021/03/17 冲泡冲煮
css3的@media属性实现页面响应式布局示例代码
2014/02/10 HTML / CSS
Html5 FileReader实现即时上传图片功能实例代码
2014/09/01 HTML / CSS
Lookfantastic俄罗斯:欧洲在线化妆品零售商
2019/08/06 全球购物
维多利亚的秘密阿联酋官网:Victoria’s Secret阿联酋
2019/12/07 全球购物
法学院方阵解说词
2014/01/29 职场文书
大学老师推荐信
2014/02/25 职场文书
五好关工委申报材料
2014/05/31 职场文书
2014年度思想工作总结
2014/11/27 职场文书
综合素质评价个性发展自我评价
2015/03/06 职场文书
员工表扬信怎么写
2015/05/05 职场文书
小学教师教学随笔
2015/08/14 职场文书
怎样写好演讲稿题目?
2019/08/21 职场文书