微信小程序实现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 相关文章推荐
jQuery.autocomplete 支持中文输入(firefox)修正方法
Mar 10 Javascript
js精度溢出解决方案
Dec 02 Javascript
javascript简单性能问题及学习笔记
Feb 04 Javascript
css结合js制作下拉菜单示例代码
Feb 27 Javascript
无刷新预览所选择的图片示例代码
Apr 02 Javascript
JavaScript中对循环语句的优化技巧深入探讨
Jun 06 Javascript
Google Maps API地图应用示例分享
Oct 23 Javascript
Vue.js计算属性computed与watch(5)
Dec 09 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
vue页面加载时的进度条功能(实例代码)
Jan 13 Javascript
Vue切换Tab动态渲染组件的操作
Sep 21 Javascript
vue 全局封装loading加载教程(全局监听)
Nov 05 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的安全
2006/10/09 PHP
隐藏X-Space个人空间下方版权方法隐藏X-Space个人空间标题隐藏X-Space个人空间管理版权方法
2007/02/22 PHP
php下获取客户端ip地址的函数
2010/03/15 PHP
php文章内容分页并生成相应的htm静态页面代码
2010/06/07 PHP
PHP编程文件处理类SplFileObject和SplFileInfo用法实例分析
2017/07/22 PHP
PHP常用函数之格式化时间操作示例
2019/10/21 PHP
javascript 变量作用域 代码分析
2009/06/26 Javascript
JQury slideToggle闪烁问题及解决办法
2011/07/05 Javascript
jquery+css+ul模拟列表菜单具体实现思路
2013/04/15 Javascript
js使用正则实现ReplaceAll全部替换的方法
2014/08/22 Javascript
js中style.display=""无效的解决方法
2014/10/30 Javascript
NodeJS学习笔记之Connect中间件模块(二)
2015/01/27 NodeJs
原生js结合html5制作简易的双色子游戏
2015/03/30 Javascript
Javascript进制转换实例分析
2015/05/14 Javascript
JS实现文档加载完成后执行代码
2015/07/09 Javascript
Vue开发过程中遇到的疑惑知识点总结
2017/01/20 Javascript
Angular 2父子组件数据传递之局部变量获取子组件其他成员
2017/07/04 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
2017/10/25 Javascript
vue非父子组件通信问题及解决方法
2018/06/11 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
Vue列表循环从指定下标开始的多种解决方案
2020/04/08 Javascript
vue+element实现图片上传及裁剪功能
2020/06/29 Javascript
VUE异步更新DOM - 用$nextTick解决DOM视图的问题
2020/11/06 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
基于python神经卷积网络的人脸识别
2018/05/24 Python
Python subprocess模块常见用法分析
2018/06/12 Python
python-Web-flask-视图内容和模板知识点西宁街
2019/08/23 Python
详解Python的三种拷贝方式
2020/02/11 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
用python读取xlsx文件
2020/12/17 Python
详解Python中的文件操作
2021/01/14 Python
CSS3实现自定义Checkbox特效实例代码
2017/04/24 HTML / CSS
英国一家集合了众多有才华设计师品牌的奢侈店:Wolf & Badger
2018/04/18 全球购物
Tiqets英国:智能手机上的文化和娱乐门票
2019/07/10 全球购物
大学生毕业求职简历的自我评价
2013/10/24 职场文书
协议书的格式
2014/04/23 职场文书