微信小程序上传Excel文本文件功能
问题：
在开发过程中会发现微信小程序有很多功能都还不能满足我们的需求，谁叫客户就是上帝呢，前几天小编遇到了这么个问题，就是用微信小程序上传文件，但是还以为微信带有这个模块，可是查了许久还是没有找到，只找到了选择上传图片的模块（wx.chooseImage），就是找不到文本文件的模块，于是上网查了个遍还是没找到这样的模块，最后查了解决这需求的方法说是要引用外部的 html 游览器上传的方法才能解决，这要怎么引用呢？？？
解决方法：
其实微信小程序还是留了那么一条天路，就是可以直接引用HTML页面，用于实现没有的功能，
引用模块：web-view
描述：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代码：
<web-view src= "{{config.root_url}}/app/app_upload?class_id={{class_id}}"></web-view>
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页面表单
<div class="frame addfile"> <form id="upload" target="form2" method="post" enctype="multipart/form-data"> <a class="ui-upload" id="load"> <!--<input type="file" name="imgFile" onclick="upload_flie()"/>--> <span class="addIcon">+</span> 上传文件 </a> </form> </div>
这是JS上传文件功能
/*批量导入*/ $('#load').after('<input type="file" id="load_xls" name="imgFile" style="display:none" onchange ="uploadFile()">'); $('#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代码：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
<meta charset="UTF-8">
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js"></script>
<style>
body{
background-color: #f4f4f4;
margin: 0px;
}
.frame{
background-color: white;
margin: 5px 0px;
padding: 8px;
}
.frame div{
margin:0px 0px 4px 0px;
}
.border_bottom{
border-bottom: 1px solid #cdcdcd;
}
.stud_block div{
display: inline-block;
}
.fixed{
width: 65px;
color: #6f6f6f;
}
.addfile{
height: 100px;
width: 100px;
margin-left: 20px;
margin-top: 10px;
border-radius: 10px;
}
.ui-upload input {
background-color: red;
height: 110px;
width: 115px;
margin: -10px;
position: absolute;
font-size: 100px;
right: 0;
top: 0;
opacity: 0;
filter: alpha(opacity=0);
cursor: pointer;
}
.ui-upload {
position: relative;
margin: -10px;
font-size: 14px;
height: 100px;
width: 115px;
line-height: 180px;
text-align: center;
position: relative;
cursor: pointer;
color: black;
border-radius: 3px;
overflow: hidden;
display: inline-block;
text-decoration: none;
font-weight: bold;
}
.outstudecxel{
width: 100%;
height: 40px;
background-color: #2fcc85;
margin: 1px 0px;
text-align: center;
line-height: 40px;
color: white;
border-radius: 5px;
position: absolute;
left: 0px;
bottom: 0px;
}
.outstudecxel:active{
background-color: #35ff35;
}
.imges{
position: relative;
left: 0px;
top: 4px;
padding: 0px 5px;
margin: 0px;
}
.imges img{
width: 24px;
height: 20px;
}
.addIcon{
position: absolute;
left: 28px;
bottom: -40px;
font-size: 40px;
margin-left: 20px;
}
</style>
</head>
<body>
<div class="frame">
<div class="border_bottom stud_block">
<div class="imges"><img src="/static/images/chalkboard-teacher.png"/></div><div class="fixed">班级：</div><div id="class_name"></div>
</div>
<div class="border_bottom stud_block">
<div class="imges"><img src="/static/images/user-plus.png"/></div><div class="fixed">人数：</div><div id="num"></div>人
</div>
<div class="stud_block">
<div class="imges"><img src="/static/images/user-tie.png"/></div><div class="fixed">班主任：</div><div id="class_man"></div>
</div>
</div>
<div class="frame">
<div>上传学生名单</div>
</div>
<div class="frame addfile">
<form id="upload" target="form2" method="post" enctype="multipart/form-data">
<a class="ui-upload" id="load">
<!--<input type="file" name="imgFile" onclick="upload_flie()"/>-->
<span class="addIcon">+</span>
上传文件
</a>
</form>
</div>
<div class="outstudecxel" onclick="downloadFile()">
导出模版
</div>
<script type="text/javascript">
var class_id ='';
function getUrlParam(name){
nk="";
var reg=new RegExp("(^|&)"+name+"=([^&]*)(&|$)");
var r=window.location.search.substr(1).match(reg);
if (r!=null) return unescape(r[2]);return nk;
};
/*批量导入*/
$('#load').after('<input type="file" id="load_xls" name="imgFile" style="display:none" onchange ="uploadFile()">');
$('#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)
}
});
}
}
})
}
//文件生成下载
function downloadFile() {
$.ajax({
type: "post",
url: "/app/generate_student_list",
data_type: "json",
data: {class_id:class_id},success: function (res){
console.log(res.rows)
try{
var elemIF = document.createElement("iframe");
elemIF.src = res.rows;
elemIF.style.display = "none";
document.body.appendChild(elemIF);
}catch(e){
}
}
});
}
//初次加载
function GetClassSingle(class_id){
$.post("/app/get_class_single",{class_id:class_id},function(data,status){
console.log("Data: " + data + "\nStatus: " + status)
if(status == 'success'){
console.log(data.rows)
$('#class_name').text(data.rows.class_name)
$('#num').text(data.rows.num)
$('#class_man').text(data.rows.class_man)
}
});
}
class_id = getUrlParam('class_id')
GetClassSingle(class_id)
</script>
</body>
</html>
点个赞呗！
