h5在微信上的多图上传功能_微信浏览器上传多张图片-CSDN博客

本文链接：https://blog.csdn.net/qq_45733381/article/details/119384040

在一次项目中遇到了h5在微信上需要实现多图上传的功能，但是完成的过程中发现一些多图上传插件在微信中只能一张一张的上传，最后发现微信h5实现多图上传需要使用微信js-sdk
实现过程：
1.首先需要在微信开放平台中绑定h5后台操作系统的域名，然后写接口返回一些必填数据以及引入
https://res.wx.qq.com/open/js/jweixin-1.2.0.js这个文件

$.ajax({
	dataType: 'json',
	url: '接口地址',
	success: function(data){
		var $weixin = JSON.parse(data);
		wx.config({
			debug: false,//是否开启调试模式
			appId: $weixin.appId, // 必填，公众号的唯一标识
			timestamp: $weixin.timestamp, // 必填，生成签名的时间戳
			nonceStr: $weixin.nonceStr, // 必填，生成签名的随机串
			signature: $weixin.signature, // 必填，签名，见附录1
			jsApiList: [
				'checkJsApi','chooseImage', 'previewImage', 'uploadImage', 'downloadImage','onMenuShareTimeline','chooseWXPay','getLocalImgData'
			] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
		});
}

2.填入上面一些必填数据后就可以使用需要的wx.chooseImage啦

wx.chooseImage({//打开相册选择图片或者使用相机拍照
	success: function (res) {
		images.localIdTemp = res.localIds;
		if(images.localIdTemp.length>0){
			if((images.localId.length+images.localIdTemp.length)>9){
				alert("最多选择9张图片");
			}else{
				var len = images.localId.length;
				for(var i=0;i<images.localIdTemp.length;i++){
					images.localId[len+i]=images.localIdTemp[i];
				}
				buildImageDiv();	
			} 
		}
	}
)}

3.我们是用asp对接的，获取上传的图片的base64数据，然后由后端写接口将其转成绝对路径，再放到隐藏的input的value中供后端使用就可以啦

for(var i=0; i<res.localIds.length; i++){//因为是上传多图，所以需要循环
	var localId = res.localIds[i];
	wx.getLocalImgData({
		localId: localId, // 图片的localID
		success: function (res1) {
			var localData = res1.localData; // localData是图片的base64数据，可以用img标签显示
			$.ajax({
				type: "post",
				url: "转base64数据的接口地址",
				data: {
					"base64_image_content":localData
				},
				cache: false,
				async : true,
				dataType: "json",
				success: function (rey)
				{
					serverIdsStr = serverIdsStr + ',' + rey.url;
					$("#serverIdStr").val(serverIdsStr.split('').splice(1).join(''));
				},
				error:function (XMLHttpRequest, textStatus, errorThrown) {
					console.log('fail');
				}
			});

		},fail:function(res){
			alert("显示失败");
		}
	});
}

完整代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<link rel="stylesheet" type="text/css" href="css/style.css"/>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<form name="frm1" action="">
	<div class="upload">
		<div class="title">图片上传：</div>
		<div id="div3" class="white" style="clear:both;overflow:auto;"> 
		  <!--包含域名时用来采用相机进行图片选择-->
		  <div style="width:90px;float:left;margin-left: 9px;" id="chooseImg">
			<img class="img-square" src="images/upload.png">      
		  </div>
		  
		  <!--不包含相机时，打开文件夹进行图片选择-->
		  <div style="width: 90px; float: left; margin-left: 9px; display: none;" id="openImg" onclick="openFile()">
			<img class="img-square" src="images/upload.png">      
		  </div>
		  
		  <!--测试使用的div-->	  
		</div>
		<div id="hiddenOpenImg" style="display:none">
		   <input type="file" id="uploadfile1" name="img" style="display:none" onchange="handleFiles(this.files)">
		</div>
	</div>
	<input type="hidden" id="serverIdStr" name="serverIdStr" value="">
	</form>
	<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
	<script>
		$("#chooseImg").show();
		$("#openImg").hide();
		$.ajax({
			dataType: 'json',
			url: '获取数据接口地址',
			success: function(data){
				var $weixin = JSON.parse(data);
				wx.config({
					debug: false,//是否开启调试模式
					appId: $weixin.appId, // 必填，公众号的唯一标识
					timestamp: $weixin.timestamp, // 必填，生成签名的时间戳
					nonceStr: $weixin.nonceStr, // 必填，生成签名的随机串
					signature: $weixin.signature, // 必填，签名，见附录1
					jsApiList: [
						'checkJsApi','chooseImage', 'previewImage', 'uploadImage', 'downloadImage','onMenuShareTimeline','chooseWXPay','getLocalImgData'
					] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
				});
			}
		})
		var images = {
			localId: [],
			serverId: [],
			localIdTemp:[]
		};
		var serverIdsStr = "";
		wx.ready(function() {
			// 在这里调用 API
			document.querySelector('#chooseImg').onclick = function () {
				wx.chooseImage({
					success: function (res) {
						images.localIdTemp = res.localIds;
						if(images.localIdTemp.length>0){
							if((images.localId.length+images.localIdTemp.length)>9){
								alert("最多选择9张图片");
							}else{
								var len = images.localId.length;
								for(var i=0;i<images.localIdTemp.length;i++){
									images.localId[len+i]=images.localIdTemp[i];
								}
								buildImageDiv();	
							} 
						}
						for(var i=0; i<res.localIds.length; i++){
							var localId = res.localIds[i];
							wx.getLocalImgData({
								localId: localId, // 图片的localID
								success: function (res1) {
									var localData = res1.localData; // localData是图片的base64数据，可以用img标签显示
									$.ajax({
										type: "post",
										url: "base64数据接口",
										data: {
											"base64_image_content":localData
										},
										cache: false,
										async : true,
										dataType: "json",
										success: function (rey)
										{
											serverIdsStr = serverIdsStr + ',' + rey.url;											$("#serverIdStr").val(serverIdsStr.split('').splice(1).join(''));
										},
										error:function (XMLHttpRequest, textStatus, errorThrown) {
											console.log('fail');
										}
									});

								},fail:function(res){
									alert("显示失败");
								}
							});
						}
					}
				});
			};
		function buildImageDiv() {//将选择的图片显示到页面上
			$(".newDiv").remove();
			for (var i = 0; i < images.localId.length; i++) {
				var imgHtml =
					'<div style="position:relative; width:90px;float:left;margin-left:9px;" class="newDiv"><img style="width:90px;height:90px" src="' +
					images.localId[i] +
					'"><div class="closeLayer" href="#" id="huajiao"><img src="images/detele.png" οnclick="showMessage(' +
					i + ')"></div></div>';
				$("#div3").append(imgHtml);
			}
		}
		function showMessage(i) {//删除上传的某一图片
			if (confirm("是否确定删除第" + (i + 1) + "张图片？")) {
				//将第i位后的数据前移
				for (var k = i; k < images.localId.length - 1; k++) {
					images.localId[k] = images.localId[k + 1];
				}
				//删除最后位图片
				images.localId.pop();
				//重新画图
				buildImageDiv();
			} else {
				return false;
			}
		}
	</script>
</body>
</html>