微信小程序实现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 相关文章推荐
随窗体滑动的小插件sticky源码
Jun 21 Javascript
js 自动播放的实例代码
Nov 19 Javascript
javascript 常见功能汇总
Jun 11 Javascript
Node.js事件驱动
Jun 18 Javascript
纯JS代码实现气泡效果
May 04 Javascript
js动态添加的DIV中的onclick事件简单实例
Jul 25 Javascript
JS实现简单易用的手机端浮动窗口显示效果
Sep 07 Javascript
详解Webpack如何引入CDN链接来优化编译后的体积
Jun 21 Javascript
判断“命令按钮”是否被鼠标单击详解
Jul 31 Javascript
基于ts的动态接口数据配置的详解
Dec 18 Javascript
工作中常用js功能汇总
Nov 07 Javascript
vue3 自定义图片放大器效果的示例代码
Jul 23 Vue.js
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语法(5)
2006/10/09 PHP
php5 mysql分页实例代码
2008/04/10 PHP
PHP解决URL中文GBK乱码问题的两种方法
2014/06/03 PHP
php判断类是否存在函数class_exists用法分析
2014/11/14 PHP
php数组排序usort、uksort与sort函数用法
2014/11/17 PHP
PHP curl CURLOPT_RETURNTRANSFER参数的作用使用实例
2015/02/07 PHP
php生成RSS订阅的方法
2015/02/13 PHP
PHP学习笔记之php文件操作
2016/06/03 PHP
5秒后跳转效果(setInterval/SetTimeOut)
2013/05/03 Javascript
js报$ is not a function 的问题的解决方法
2014/01/20 Javascript
zepto.js中tap事件阻止冒泡的实现方法
2015/02/12 Javascript
javascript无刷新评论实现方法
2015/05/13 Javascript
Jquery日期选择datepicker插件用法实例分析
2015/06/08 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
js放大镜放大购物图片效果
2017/01/18 Javascript
JavaScript类的继承方法小结【组合继承分析】
2018/07/11 Javascript
Vue+ElementUI使用vue-pdf实现预览功能
2019/11/26 Javascript
JS 逻辑判断不要只知道用 if-else 和 switch条件判断(小技巧)
2020/05/27 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
Vue2.x-使用防抖以及节流的示例
2021/03/02 Vue.js
MySQL最常见的操作语句小结
2015/05/07 Python
Python环境下安装使用异步任务队列包Celery的基础教程
2016/05/07 Python
详解Python之unittest单元测试代码
2018/01/24 Python
Python生成器定义与简单用法实例分析
2018/04/30 Python
20行python代码的入门级小游戏的详解
2019/05/05 Python
选择python进行数据分析的理由和优势
2019/06/25 Python
python字典排序的方法
2019/10/12 Python
Python生成并下载文件后端代码实例
2020/08/31 Python
Cpython解释器中的GIL全局解释器锁
2020/11/09 Python
20年同学聚会邀请函
2014/02/04 职场文书
白血病募捐倡议书
2014/05/14 职场文书
小学校本教研总结
2015/08/13 职场文书
环保建议书作文400字
2015/09/14 职场文书
2016大学生诚信考试承诺书
2016/03/25 职场文书
elasticSearch-api的具体操作步骤讲解
2021/06/28 Java/Android
Python实现查询剪贴板自动匹配信息的思路详解
2021/07/09 Python