微信小程序实现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初学者需要了解10个小技巧
Aug 25 Javascript
初窥JQuery(一)jquery选择符 必备知识点
Nov 25 Javascript
jquery判断浏览器类型的代码
Nov 05 Javascript
jQuery判断密码强度实现思路及代码
Apr 24 Javascript
js向上无缝滚动,网站公告效果 具体代码
Nov 18 Javascript
jquery ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
avalon js实现仿微博拖动图片排序
Aug 14 Javascript
Js查找字符串中出现次数最多的字符及个数实例解析
Sep 05 Javascript
switch语句的妙用(必看篇)
Oct 03 Javascript
jQuery 的 ready()的纯js替代方法
Nov 20 Javascript
react高阶组件添加和删除props
Apr 26 Javascript
javascript中的this作用域详解
Jul 15 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
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
PHP获取数组中重复最多的元素的实现方法
2014/11/11 PHP
图片自动更新(说明)
2006/10/02 Javascript
JQuery 选项卡效果(JS与HTML的分离)
2010/04/01 Javascript
javascript预览上传图片发现的问题的解决方法
2010/11/25 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果
2015/08/31 Javascript
JS原型、原型链深入理解
2016/02/27 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
jQuery复合事件用法示例
2017/06/10 jQuery
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
微信小程序当前时间时段选择器插件使用方法详解
2018/12/28 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
2019/05/21 Javascript
用python与文件进行交互的方法
2018/03/01 Python
python实现简易通讯录修改版
2018/03/13 Python
python和shell获取文本内容的方法
2018/06/05 Python
pygame游戏之旅 添加icon和bgm音效的方法
2018/11/21 Python
Python利用pandas处理Excel数据的应用详解
2019/06/18 Python
python获取linux系统信息的三种方法
2020/10/14 Python
在终端启动Python时报错的解决方案
2020/11/20 Python
Python基于execjs运行js过程解析
2020/11/27 Python
快速创建 HTML5 Canvas 电信网络拓扑图的示例代码
2018/03/21 HTML / CSS
HTML5视频播放插件 video.js介绍
2018/09/29 HTML / CSS
中国最大的潮流商品购物网站:YOHO!BUY有货
2017/01/07 全球购物
《北京的春节》教学反思
2014/04/07 职场文书
应届大专毕业生自我鉴定
2014/04/08 职场文书
初中学校对照检查材料
2014/08/19 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
2014年个人工作总结范文
2014/11/07 职场文书
出国留学自荐信模板
2015/03/06 职场文书
美术教师求职信范文
2015/03/20 职场文书
2015年英语教学工作总结
2015/05/25 职场文书
mysql 8.0.24 安装配置方法图文教程
2021/05/12 MySQL
python中pandas对多列进行分组统计的实现
2021/06/18 Python