微信公众号上传图片功能

//获取公众号网页签名信息function getWxData() {var link = location.href;console.log(link)console.log("获取公众号网页签名信息");$.ajax({url: "...?url=" + link,//后台给你提供的接口async: false,contentType: "application/json; charset=utf-8",dataType: "json",success: function (datad) {wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来appId: datad.AppId, // 必填，公众号的唯一标识timestamp: datad.timestamp, // 必填，生成签名的时间戳nonceStr: datad.nonceStr, // 必填，生成签名的随机串signature: datad.signature,// 必填，签名，见附录1jsApiList: ["getLocation","chooseImage","getLocalImgData"] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2});flag = false;},error: function (error) {layer.msg(error)}});wx.ready(function(){// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。getWxLocation();});//处理IOS端，公众号点击返回，再次点进去，上传不生效if(flag){window.location.reload();}wx.checkJsApi({jsApiList: ['getLocation','getLocalImgData','chooseImage'],success: function (res) {bindClick();}});}function bindClick(){$('#file').on('click', function () {if ($('.new-preview') && $('.new-preview').length >= 5) {return alert('最多上传五张！');} else {wx.chooseImage({count: 5 - $('.new-preview').length, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {console.log('++++++++++++++++++++++++++++++++++++++++++++++')console.log(res);// var localIds = res.localIds[0]; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片// 开始上传handlerUploadMask('上传中', 1000, 'uploading');for (var i = 0; i < res.localIds.length; i++) {if (i == res.localIds.length - 1) {// 最后一次上传图片成功时，显示上传成功并关闭getLocalImgData(res.localIds[i], true);} else {getLocalImgData(res.localIds[i]);}}}});}})}//获取本地图片function getLocalImgData(localId, endIndex) {wx.getLocalImgData({localId: localId, // 图片的localIDsuccess: function (res) {console.log(res)//处理android的localData不包含data:image/png;base64let localData = (isIos() ? "" : "data:image/png;base64,") + res.localData; // localData是图片的base64数据，可以用img标签显示let blobData = dataURLtoBlob(localData);var formData = new FormData();formData.append("file", blobData);console.log('formData', formData);// 第一步$.ajax({url: '....', //请求的接口地址type: 'POST',cache: false, //上传文件不需要缓存data: formData,processData: false, // 不要去处理发送的数据contentType: false, // 不要去设置Content-Type请求头success: function (data) {console.log(endIndex);if (endIndex) {handlerUploadMask('上传成功', 0.8, 'uploaded');}console.log('上传单张图片成功！', data);//对象数组// alert(data[0].downUrl);if (data.length) {data.forEach(item => {console.log('item', item);if (item.downUrl !== null) {// if (0) {uploadArr.push(item.downUrl)console.log(uploadArr, 'upArr');} else {$('.upload-img-error-mask').css('display', 'flex');setTimeout(() => {$('.upload-img-error-mask').css('display', 'none');}, 5000);return;}})//3、回显let div = document.createElement("div"),img = document.createElement("img"),sonI = document.createElement("i");div.className = "new-preview";sonI.className = 'cancel-btn iconfont icon-guanbi'img.src = localData;div.appendChild(img);div.appendChild(sonI);$('.preview').prepend(div);}},error: function (err) {handlerUploadMask('上传图片失败', 0.8, 'error');console.log('上传图片失败！', err)}})}});}// 判断设备为 iosfunction isIos() {let u = navigator.userAgent;if (u.indexOf("iPhone") > -1 || u.indexOf("iOS") > -1) {return true;}return false;}function dataURLtoBlob(dataurl) {var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);while (n--) {u8arr[n] = bstr.charCodeAt(n);}return new Blob([u8arr], {type: mime});}//上传中遮罩，这里加状态处理上传成功后隐藏掉loading图function handlerUploadMask(content, duration, status) {$('.upload-mask-msg img').css('animation','rotateCircle 0.8s linear infinite');$('.upload-mask').css('display', 'flex').find('p').text(content);if (status == 'uploading') {// 上传中$('.upload-mask-msg').css('display', 'block').find('img').css('display', 'block');} else if (status == 'uploaded') {wordDeal();} else {wordDeal();}setTimeout(() => {$('.upload-mask').css('display', 'none');}, duration * 1000);}//上传成功或者失败文字居中function wordDeal(){$('.upload-mask-msg').css('display', 'flex').find('img').css('display', 'none');$('.upload-mask-msg').css('justify-content', 'center');$('.upload-mask-msg').css('align-items', 'center');}