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

最新推荐文章于 2025-02-17 09:38:57 发布

ღ故里᭄ꦿ࿐

最新推荐文章于 2025-02-17 09:38:57 发布

阅读量9.5k

点赞数 5

文章标签：小程序文件上传 pdf等文件上传

本文链接：https://blog.csdn.net/Hunt_bo/article/details/97097490

版权

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

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>