微信小程序实现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 学习笔记 选择器之四
Jul 23 Javascript
javascript判断用户浏览器插件安装情况的代码
Jan 01 Javascript
js 动态加载事件的几种方法总结
Dec 25 Javascript
jQuery过滤选择器:not()方法使用介绍
Apr 20 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
Aug 12 Javascript
使用script的src实现跨域和类似ajax效果
Nov 10 Javascript
MVVM模式中ViewModel和View、Model有什么区别?
Jun 19 Javascript
Bootstrap下拉菜单样式
Feb 07 Javascript
你有必要知道的10个JavaScript难点
Jul 25 Javascript
浅谈react+es6+webpack的基础配置
Aug 09 Javascript
通过js给网页加上水印背景实例
Jun 17 Javascript
vue.js实现双击放大预览功能
Jun 23 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几个数学计算的内部函数学习整理
2011/08/06 PHP
PHP页面间参数传递的四种方法详解
2013/06/09 PHP
PHP的JSON封装、转变及输出操作示例
2019/09/27 PHP
laravel框架 laravel-admin上传图片到oss的方法
2019/10/13 PHP
JS去除字符串的空格增强版(可以去除中间的空格)
2009/08/26 Javascript
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
跨浏览器开发经验总结(四) 怎么写入剪贴板
2010/05/13 Javascript
cument.execCommand()用法深入理解
2012/12/04 Javascript
PHP 数组current和next用法分享
2015/03/05 Javascript
jQuery实现表格行上移下移和置顶的方法
2015/05/22 Javascript
input 禁止输入特殊字符的四种实现方式
2016/08/24 Javascript
js的三种继承方式详解
2017/01/21 Javascript
JS实现按钮控制计时开始和停止功能
2017/07/27 Javascript
vue-cli中的babel配置文件.babelrc实例详解
2018/02/22 Javascript
JavaScript设计模式之建造者模式实例教程
2018/07/02 Javascript
解决angular2 获取到的数据无法实时更新的问题
2018/08/31 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
使用Python的Scrapy框架编写web爬虫的简单示例
2015/04/17 Python
Python查找文件中包含中文的行方法
2018/12/19 Python
python实现简单日期工具类
2019/04/24 Python
python安装virtualenv虚拟环境步骤图文详解
2019/09/18 Python
python mock测试的示例
2020/10/19 Python
详解CSS3:overflow属性
2020/11/17 HTML / CSS
一些关于MySql加速和优化的面试题
2014/01/30 面试题
十佳班主任事迹材料
2014/01/18 职场文书
工作睡觉检讨书
2014/02/25 职场文书
服装设计师职业生涯规划范文
2014/02/28 职场文书
决心书标准格式
2014/03/11 职场文书
协议书样本
2014/04/23 职场文书
高中生个性发展自我评价
2015/03/09 职场文书
应届生简历自我评价
2015/03/11 职场文书
宝宝满月祝酒词
2015/08/10 职场文书
高中政治教学反思
2016/02/23 职场文书
原来实习报告是这样写的呀!
2019/07/03 职场文书
基于Python实现射击小游戏的制作
2022/04/06 Python
Java结构型设计模式之组合模式详解
2022/09/23 Java/Android