微信小程序上传Excel文本文件功能

问题:

在开发过程中会发现微信小程序有很多功能都还不能满足我们的需求,谁叫客户就是上帝呢,前几天小编遇到了这么个问题,就是用微信小程序上传文件,但是还以为微信带有这个模块,可是查了许久还是没有找到,只找到了选择上传图片的模块(wx.chooseImage),就是找不到文本文件的模块,于是上网查了个遍还是没找到这样的模块,最后查了解决这需求的方法说是要引用外部的 html 游览器上传的方法才能解决,这要怎么引用呢???

解决方法:

其实微信小程序还是留了那么一条天路,就是可以直接引用HTML页面,用于实现没有的功能,

引用模块:web-view

描述:web-view 组件是一个可以用来承载网页的容器,会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。

 
这个模块使用起来极其简单
<web-view src="https://mp.weixin.qq.com/">web-view>
 
直接调用src访问你HTML所在服务器的地址,服务器能正常返回我也即可JS什么都不用写就直接傻瓜式的访问服务器页面就可以,如果要带参数就直接在src地址后加上参数就可以
<web-view src="https://mp.weixin.qq.com/?id=123456&name=abc">web-view>
 
如何新建一个HTML页面放在服务器端上即可,游览器你正常访问页面就算成功了
 
这时要想上传文件这就简单的多了,直接使用HTML的JS上传文件的代码即可,
 
这是我的微信小程序
 
wxml代码:
 
js代码:
const config = require('../../../utils/config.js');
var class_id = ''
Page({
  /**
  * 页面的初始数据
  */
  data: {
    config:config,
  },

  /**
  * 生命周期函数--监听页面加载
  */
  onLoad: function(options) {
    console.log(options)
    class_id = options.class_id;
    this.setData({
      class_id: class_id,
    })
  },
})
 
wxss代码为空不需要在这写样式
 
这是我要引用的HTML页面代码:
 这是HTML页面表单

这是JS上传文件功能
/*批量导入*/
$('#load').after('');
$('#load').click(function(){
document.getElementById("load_xls").click();
});
function uploadFile() {
var form = document.getElementById('upload'),
formData = new FormData(form);
console.log(formData)
$.ajax({
url:"/app/upload_file",
type:"post",
data:formData,
processData:false,
contentType:false,
success:function(res){
if(res.ret==0){
console.log(res.url)
$.post("/app/upload_ecxel",{ class_id: class_id,file_name:res.url},function(data,status){
console.log("\nStatus: " + status)
if(status == 'success'){
GetClassSingle(class_id)
}
});
}
}
})
}
只需要像游览器一样实现js上传功能就可以并没有那么复杂下面是我完整的HTML代码:











班级:



人数:



班主任:




上传学生名单




导出模版



点个赞呗!
技术交流群:912244706
 
 

转载于:https://www.cnblogs.com/YushinFukuhara/p/9521117.html

你可能感兴趣的:(微信小程序上传Excel文本文件功能)