問題：
在開發過程中會發現微信小程序有很多功能都還不能滿足我們的需求，誰叫客戶就是上帝呢，前幾天小編遇到了這么個問題，就是用微信小程序上傳文件，但是還以為微信帶有這個模塊，可是查了許久還是沒有找到，只找到了選擇上傳圖片的模塊（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>
點個贊唄！