微信公众号图片上传和预览功能前端实现

星星之火,亦可燎原

已于 2022-06-28 16:30:42 修改

阅读量1k

点赞数

文章标签：微信前端微信公众平台 javascript

于 2022-06-28 16:22:00 首次发布

本文链接：https://blog.csdn.net/weixin_44900546/article/details/125497082

版权

本文介绍了一篇关于使用JSP技术实现前端页面，允许用户上传图片并支持删除、预览功能的文章。通过微信JS-SDK集成，展示了如何选择本地或相机照片，以及如何处理超过限制的图片数量和使用FormData进行文件上传。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前端jsp页面

<head>
<script type="text/javascript" language="javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js" ></script>
</head>
<body>
<div class="item_flex ">
     <div class="label">上传图片凭证（最多6张）</div>
</div>
<div class="item_flex ">
   <div class="pic_upload">
       <div class="pic_box" onclick="uplpadImage(this);">
            <img src="" alt="" class="icon-camera" >
       </div>
    </div>
</div>
 <div onclick="uploadImg" >提交</div>
</body>
<script>
$(function(){
	 wx.config({
            debug: true, // 是否开启调试模式
            appId: "", // 必填，企业号的唯一标识，此处填写企业号corpid
            timestamp: "", // 必填，生成签名的时间戳
            nonceStr: "", // 必填，生成签名的随机串
            signature: "",// 必填，签名
            jsApiList: ["chooseImage","uploadImage","getLocalImgData"] // 必填，需要使用的JS接口列表
        }); 
    
        wx.ready(function(){
            // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
        });
    
        wx.error(function(res){
            alert("res="+res.errMsg);
            // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
        }); 
	
	//删除图片
	$(document).on('click','.icon-delete2', function () {
       $(this).parent('.pic_box').remove()
    })
})

//获取上传图片
var formData;
function uplpadImage(obj){
	var length1=$('.pic_upload').children().length;
	//剩下可用长度
	var length2=7-length1;
	if(length2<=0){
		return;
	}
	wx.chooseImage({
	  count: length2,
	  sizeType: ['original', 'compressed'],
	  sourceType: ['album', 'camera'],
	  success (res) {
		obj.remove();
	    // tempFilePath可以作为 img 标签的 src 属性显示图片
	    var localIds = res.localIds;
	    let picBox="";
	    for (i in localIds) {
   			picBox+= '<div class="pic_box">';
   			picBox+='<img src="'+localIds[i]+'" alt="" class="goods-pic" onclick="imgPreview(\''+localIds[i]+'\')">';
   			picBox+='<img src="" alt="" class="icon-delete2">';
   			picBox+='</div>';
	    }	
	    picBox+= '<div class="pic_box" onclick="uplpadImage(this);">';
		picBox+='<img src="" alt="" class="icon-camera">';
		picBox+='</div>';
	    $('.pic_upload').append(picBox)
	    formData=getformData();//由于实际需要转成formdata对象上传到本地后台进行处理,不上传到微信服务器
	  }
	})
}

function getformData(){
	var lenght3=$('.pic_upload').children().length;
	var index=0;
	var pzs=[];
	for(var i=0;i<lenght3-1;i++){
		var localId=$(".pic_upload div").eq(i).find("img")[0].src;
		pzs.push(localId);
	}
	//alert("pzs:"+pzs);
	var fd=base64ToFormdata(pzs,index);//base64转Formdata
	return fd;	
}
//base64转formdata对象
var fd = new FormData();
function base64ToFormdata(pzs,index){
	wx.getLocalImgData({
         localId: pzs[index], // 图片的localID
         success: function (res) {
         	var localData = res.localData; // localData是图片的base64数据，可以用img标签显示
         	//alert("localData["+index+"]"+localData);
         	//因为安卓获取的base64编码缺少头部,判断是否有这样的头部
           if (localData.indexOf('data:image') != 0){
             localData = 'data:image/jpeg;base64,' +  localData;
          localData = localData.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg');
           }
   		var data = window.atob(localData.split(",")[1]);
           //alert("data:"+data);
       	var ia = new Uint8Array(data.length);
       	for (let i = 0; i < data.length; i++) {
       	   ia[i] = data.charCodeAt(i);
       	}
       	const blob = new Blob([ia], { type: 'image/jpeg' });
       	fd.append('files', blob, new Date().getTime() + '.jpg');
           index = index + 1;
		if (index < pzs.length) {//由于getLocalImgData是异步请求,需要递归遍历
			getBase64(pzs, index);
           }
         }
       });
	return fd;
}
//上传图片
function uploadImg(){
       $.ajax({  
           url :' ', //上传到后台进行处理
           type: "POST",  
           data: formData,
           contentType: false,
           processData: false,
           cache:false,
           async:false,
           success : function(data) {
           		
           },
           error : function(){
              
           }  
       });
}
//图片预览功能
 function imgPreview(src){
	var pzs=[];
	var lenght3=$('.pic_upload').children().length;
	for(var i=0;i<lenght3-1;i++){
		var localId=$(".pic_upload div").eq(i).find("img")[0].src;
		pzs.push(localId);
	}
	wx.previewImage({
    		current:src,
    		urls:pzs
    	});
	
}
</script>

实际效果:可以选择拍照或者本地上传,点击删除按钮可进行删除图片,超过指定张数不可选择,点击图片可以进行放大预览,支持左右滑动预览
在这里插入图片描述