这遍文章主要介绍下，在小程序的开发过程中实现多个文件上传的实现方法。
chooseMessageFile
使用这一种方式进行多文件的上传时，就是说从客户端会话选择文件,下面是chooseMessageFile的一些参数：
count : 表示最多选择的文件个数，可以是0~100的数；
type : 表示选择的文件的类型，默认为all；
success : 表示接口调用成功时的回调函数；
fail : 表示接口调用失败的回调函数；
complete : 接口调用结束的回调函数（调用成功、失败都会执行）。
在进行接口调用时，success回调函数附带文件的相关信息，包含于tempFiles中，可以通过获取获取的信息进行下一步的上传操作。例如打印success的返回信息：
wx.chooseMessageFile({ count: 5, type: 'image', success(res) { console.log(res) }})
在进行文件的uploadFile时由于参数filePath要的是上传资源的路径，所以说只能一个一个的上传，而所需要的路径恰恰是tempFiles中每一项的path属性，所以在一个文件的时候就会非常好办。
直接上的代码吧！
wx.chooseMessageFile({ count: 5, type: 'all', success(file) { wx.uploadFile({ url: 'xxxxxxxxxxxxx', filePath: file.tempFiles[0].path, name: 'file', formData: { //其他需要参数 }, success(res) { //成功回调函数 } }) }})但是在进行多文件上传的时候，就会出现一些问题，我是通过定时器进行循环上传的，如果文件小的话，还是需要等待那么久的时间，而如果文件大了的话，就会超过定时器规定的时间，导致数组tempFiles的报错，下面是我错误的案例：
wx.chooseMessageFile({ count: 5, type: 'all', success(file) { var NUMBER = 0; var timer = setInterval(function () { if (NUMBER < file.tempFiles.length) { wx.uploadFile({ url: 'xxxxxxxxxxxxxxxxx', filePath: file.tempFiles[NUMBER].path, name: 'file', formData: { //提交数据 }, success(res) { NUMBER++; if (NUMBER == file.tempFiles.length){ clearInterval(timer); //上传成功提示 } } }) } }, 2000) } })最后发现文件的大小对上传的影响简直太大了，想办法只能在第一个文件上传完毕后再去上传第二个文件，在改bug的过程中，想到了算法里的递归调用，函数调用自身的方法，所以最后的实现方法：
1、定义函数
function uploadFile(fileTemp, NUMBER, formId,set){ wx.uploadFile({ url: 'xxxxxxxxxxxxxxxxxxxxxxxxxxx', filePath: fileTemp[NUMBER].path, name: 'file', formData: { //上传数据 }, success(res) { set.setData({ 'TIP': '第' + (NUMBER+1) + '个文件上传成功' }); console.log(res); if (NUMBER+1 == fileTemp.length) { wx.showModal({ title: '提示', content: '上传成功', success: function (res) { wx.switchTab({ url: "/pages/submit/submit" }) } }) } else { uploadFile(fileTemp, NUMBER+1, formId,set); } } })}2、选择文件并调用
wx.chooseMessageFile({ count: 10, type: 'all', success(file) { change.setData({ 'TIP': '文件上传中' }); uploadFile(file.tempFiles, 0, formId,change); }})web-view
web-view是承载网页的容器。会自动铺满整个小程序页面，说到底就是在进行文件上传的时候还是通过原来的H5的form表单进行提交数据，而web-view负责把这个页面放进小程序里，下面是他的部分属性：
src:webview:指向网页的链接。可打开关联的公众号的文章，其它网页需登录小程序管理后台配置业务域名；
bindmessage:网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }，data是多次 postMessage 的参数组成的数组；
bindload:网页加载成功时候触发此事件。e.detail = { src ；
binderror:网页加载失败的时候触发此事件。e.detail = { src }；
需要注意的是：
1、网页内 iframe 的域名也需要配置到域名白名单。
2、开发者工具上，可以在web-view组件上通过右键 - 调试，打开web-view组件的调试。
3、每个页面只能有一个 web-view，web-view 会自动铺满整个页面，并覆盖其他组件。
4、web-view网页与小程序之间不支持除 JSSDK 提供的接口之外的通信。
5、在 iOS 中，若存在JSSDK接口调用无响应的情况，可在web-view的 src 后面加个#wechat_redirect解决。
6、避免在链接中带有中文字符，在 iOS 中会有打开白屏的问题，建议加一下 encodeURIComponent。
引入方式：
<web-view src='H5页面的地址'></web-view> <!--注意：页面需要配置白名单-->
<!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"><title>文件上传</title><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script><script src="http://malsup.github.io/min/jquery.form.min.js"></script><script src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script><style type="text/css">body,html{width: 100%;height: 100%;margin: 0;}#form{width: 100%;height: 100%;display: flex;flex-direction:column;justify-content:center;align-items:center;}.oldFile{display:none;}.newFile{width: 150px;height: 150px;border-radius: 50%;background-color: #10a78e;text-align: center;line-height: 150px;color: white;}.btn{width: 150px;height: 45px;background-color: #c1c1c1;color:white;outline: none;border: 0;border-radius: 10px;}.filename{width: 100%;height: 120px;margin: 50px 0;line-height: 24px;text-align: center;}</style></head><body><form id="form" action="http://underwriting.algerfan.cn/underwriting/upload" method="post" enctype="multipart/form-data"><div class="newFile">选择文件</div><div class="filename"></div><input type="submit" value="上传文件" class="btn"><input class="encryptedData" style="display: none;" type="text" name="encryptedData" /><input class="iv" style="display: none;" type="text" name="iv" /><input class="code" style="display: none;" type="text" name="code" /> <input class="name" style="display: none;" type="text" name="name" /><input type="file" name="file" class="oldFile"></form></body><script type="text/javascript">function getUrlParam(name) {var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");var r = window.location.search.substr(1).match(reg);if (r != null) return unescape(r[2]);return null;}var encryptedData = getUrlParam('encryptedData');var iv = getUrlParam('iv');var code = getUrlParam('code');var name = getUrlParam('name');$('.encryptedData').val(encryptedData);$('.iv').val(iv);$('.code').val(code); $('.name').val(name);var INPUTINDEX = 0;$('.newFile').click(function(){$(".oldFile").eq(INPUTINDEX).change(function(){$('.newFile').css('line-height','20px');$('.newFile').css('padding-top','45px');$('.newFile').css('height','105px');$('.newFile').html('继续选择'+'<br/>'+'点击不需要的文'+'<br/>'+'件进行删除');var NAME = getfilename(INPUTINDEX);var NODE = '<div class="names">'+NAME+'</div>';$('.filename').append(NODE);$('.btn').css('background-color','#10a78e');})if(INPUTINDEX>4){alert('最多添加五个文件');}else if(INPUTINDEX==4){$('.oldFile').eq(INPUTINDEX).click();INPUTINDEX++;}else{var newinput = '<input type="file" name="file" class="oldFile">';$('#form').append(newinput);$('.oldFile').eq(INPUTINDEX).click();INPUTINDEX++;}});function getfilename(index){ var file = $(".oldFile").eq(index-1).val(); var name = file.lastIndexOf("\"); var fileName = file.substring(name+1); return fileName;}setInterval(function(){$('.names').click(function(){var INDEX = $(this).index();$(this).remove();var text = document.getElementsByClassName('oldFile')[INDEX];document.getElementById('form').removeChild(text);INPUTINDEX--;})},100)$(function(){$("#form").ajaxForm(function(data){if(data.code==1){wx.miniProgram.switchTab({url: '/pages/submit/submit'})wx.miniProgram.postMessage({ data: 'foo' })wx.miniProgram.postMessage({ data: {foo: 'bar'} })}}); });</script></html>
