微信公众号上传图片功能

//获取公众号网页签名信息
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,// 必填，签名，见附录1
                jsApiList: [
                    "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, // 默认9
                sizeType: ['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, // 图片的localID
        success: function (res) {
            console.log(res)
            //处理android的localData不包含data:image/png;base64
            let 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)
                }
            })
        }
    });
}

// 判断设备为 ios
function 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');
}