微信小程序实现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的tab切换 js原理
Apr 01 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
文本框只能输入数字的js代码(含小数点)
Jul 10 Javascript
浅谈react.js 之 批量添加与删除功能
Apr 17 Javascript
详解http访问解析流程原理
Oct 18 Javascript
浅谈在Vue-cli里基于axios封装复用请求
Nov 06 Javascript
node中modules.exports与exports导出的区别
Jun 08 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
微信小程序带动画弹窗组件使用方法详解
Nov 27 Javascript
浅谈vue.use()方法从源码到使用
May 12 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 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/07/07 PHP
php UBB 解析实现代码
2011/11/27 PHP
YII实现分页的方法
2014/07/09 PHP
推荐:极酷右键菜单
2006/11/29 Javascript
用javascript自动显示最后更新时间
2007/03/15 Javascript
含有CKEditor的表单如何提交
2014/01/09 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
HTML5 Shiv完美解决IE(IE6/IE7/IE8)不兼容HTML5标签的方法
2015/11/25 Javascript
逻辑表达式中与或非的用法详解
2016/06/06 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
javascript实现消灭星星小游戏简单版
2016/11/15 Javascript
如何选择jQuery版本 1.x? 2.x? 3.x?
2017/04/01 jQuery
Three.js 再探 - 写一个微信跳一跳极简版游戏
2018/01/04 Javascript
vue-cli3使用 DllPlugin 实现预编译提升构建速度
2019/04/24 Javascript
layui自定义插件citySelect实现省市区三级联动选择
2019/07/26 Javascript
JavaScript正则表达式验证登录实例
2020/03/18 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
[02:59]2014DOTA2西雅图国际邀请赛 圆满落幕中国夺冠
2014/07/23 DOTA
jupyter安装小结
2016/03/13 Python
Python 实现数据库(SQL)更新脚本的生成方法
2017/07/09 Python
浅析Python数据处理
2018/05/02 Python
python实现朴素贝叶斯算法
2018/11/19 Python
python2和python3的输入和输出区别介绍
2018/11/20 Python
python中嵌套函数的实操步骤
2019/02/27 Python
解决阿里云邮件发送不能使用25端口问题
2020/08/07 Python
德国婴儿推车和儿童安全座椅商店:BABYSHOP
2016/09/01 全球购物
说出ArrayList,Vector, LinkedList的存储性能和特性
2015/01/04 面试题
装修致歉信
2014/01/15 职场文书
学校十一活动方案
2014/02/01 职场文书
冰淇淋开店创业计划书
2014/02/01 职场文书
领导干部群众路线教育实践活动剖析材料
2014/10/10 职场文书
2014年办公室人员工作总结
2014/12/09 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
匿名信格式范文
2015/05/27 职场文书
运动员加油词
2015/07/18 职场文书