微信小程序实现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 相关文章推荐
如何让动态插入的javascript脚本代码跑起来。
Jan 09 Javascript
jquery用get实现ajax在ie里面刷新不进入后台解决方法
Aug 12 Javascript
JS数组的遍历方式for循环与for...in
Jul 31 Javascript
jQuery在页面加载时动态修改图片尺寸的方法
Mar 20 Javascript
学习javascript文件加载优化
Feb 19 Javascript
bootstrap datetimepicker实现秒钟选择下拉框
Jan 05 Javascript
JS实现颜色的10进制转化成rgba格式的方法
Sep 04 Javascript
vue+webpack实现异步组件加载的方法
Feb 03 Javascript
angular将html代码输出为内容的实例
Sep 30 Javascript
如何在Vue.js中实现标签页组件详解
Jan 02 Javascript
微信小程序保存多张图片的实现方法
Mar 05 Javascript
CKEditor扩展插件:自动排版功能autoformat插件实现方法详解
Feb 06 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
《忧国的莫里亚蒂》先导宣传图与STAFF公开
2020/03/04 日漫
mysql总结之explain
2012/02/27 PHP
php禁止直接从浏览器输入地址访问.php文件的方法
2014/11/04 PHP
php计算税后工资的方法
2015/07/28 PHP
分享ThinkPHP3.2中关联查询解决思路
2015/09/20 PHP
PHP响应post请求上传文件的方法
2015/12/17 PHP
php + ajax 实现的写入数据库操作简单示例
2020/05/16 PHP
JavaScript 事件对象的实现
2009/07/13 Javascript
html+css+js实现xp window界面及有关功能
2013/03/26 Javascript
fmt:formatDate的输出格式详解
2014/01/09 Javascript
JS仿淘宝实现的简单滑动门效果代码
2015/10/14 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
2017/06/25 Javascript
带你了解session和cookie作用原理区别和用法
2017/08/14 Javascript
vue服务端渲染的实例代码
2017/08/28 Javascript
本地搭建微信小程序服务器的实现方法
2017/10/27 Javascript
angularjs实现柱状图动态加载的示例
2017/12/11 Javascript
微信小程序canvas绘制圆角base64图片的实现
2019/08/18 Javascript
python3.6 +tkinter GUI编程 实现界面化的文本处理工具(推荐)
2017/12/20 Python
python爬虫爬取某站上海租房图片
2018/02/04 Python
Flask之flask-session的具体使用
2018/07/26 Python
使用Python向C语言的链接库传递数组、结构体、指针类型的数据
2019/01/29 Python
python创造虚拟环境方法总结
2019/03/04 Python
使用python turtle画高达
2020/01/19 Python
Python3打包exe代码2种方法实例解析
2020/02/17 Python
postman和python mock测试过程图解
2020/02/22 Python
荷兰之家英文站:Holland at Home
2016/10/26 全球购物
欧舒丹加拿大官网:L’Occitane加拿大
2017/10/29 全球购物
幼儿园大班新学期寄语
2014/01/18 职场文书
党员党性分析材料
2014/02/17 职场文书
挂职自我鉴定
2014/02/26 职场文书
私人会所最新创业计划书范文
2014/03/24 职场文书
法人任命书范本
2014/06/04 职场文书
2015年乡镇科普工作总结
2015/05/13 职场文书
领导离职感言
2015/08/03 职场文书
校园之声广播稿
2015/08/18 职场文书
HTML5+CSS+JavaScript实现捉虫小游戏设计和实现
2021/10/16 HTML / CSS