微信小程序多文件上传（docx，ppt，pdf，zip，jpg···）

川长思鸟来 2021-11-26 13:16 1985阅读 0赞

这遍文章主要介绍下，在小程序的开发过程中实现多个文件上传的实现方法。

### chooseMessageFile ###

使用这一种方式进行多文件的上传时，就是说从客户端会话选择文件,下面是chooseMessageFile的一些参数：

**count : **表示最多选择的文件个数，可以是0~100的数；

**type : **表示选择的文件的类型，默认为all；

**success : **表示接口调用成功时的回调函数；

**fail : **表示接口调用失败的回调函数；

**complete : **接口调用结束的回调函数（调用成功、失败都会执行）。

在进行接口调用时，success回调函数附带文件的相关信息，包含于tempFiles中，可以通过获取获取的信息进行下一步的上传操作。例如打印success的返回信息：

wx.chooseMessageFile({
          count: 5,
          type: 'image',
          success(res) {
          console.log(res)
       }
    })

![20190724084222572.png][]

在进行文件的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、定义函数**

**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>

[20190724084222572.png]: /images/20211126/0e2387da5e4043beae5ca31291ed0c35.png