美文网首页
微信---上传图片

微信---上传图片

作者: G_whk | 来源:发表于2018-09-13 14:06 被阅读0次
    1. 在html中引入
    <script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
    
    1. 从后端获取微信配置的数据
    wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                appId: data.data.appId, // 必填,公众号的唯一标识
                timestamp: parseInt(data.data.timestamp), // 必填,生成签名的时间戳
                nonceStr: data.data.nonceStr, // 必填,生成签名的随机串
                signature: data.data.signature, // 必填,签名,见附录1
                jsApiList: ['chooseImage', 'uploadImage', 'downloadImage'], // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
            });
    
    1. 选择图片
    wx.chooseImage({
                count: 6 - countLength,
                sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
                success: function (data) {
                    // localIds = data.localIds[0].toString(); // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
                    console.log(localIds);
                    localIds = data.localIds;
                    countLength = data.localIds.length;
                    // 本地展示图片
                    data.localIds.forEach(element => {
                        $(".lastLi").before('<li><img src="' + element.toString() + '" alt=""></li>');
                    });
                },
                fail: function (res) {
                    // alterShowMessage("操提示", JSON.stringify(res), "1", "确定", "", "", "");
                }
            });
    
    1. 上传图片
    上传兼容ios:
    if (window.__wxjs_is_wkwebview) {
                wxgetLocalImgData(localIds);
            } else {
                localIds.forEach((item, index) => {
                    // localIdImgs.push(item);
                    // if (localIdImgs.length >= imgaesMaxLenght) {
                    //     imgLenght = false
                    // }
                });
            }
           wxuploadImage(localIds);
    
    
    
    function wxuploadImage(localIds) {
        let i = 0; let length = localIds.length;
        let upload = function () {
            let loacId = localIds[i];
            if (window.__wxjs_is_wkwebview) {
                if (loacId.indexOf("wxlocalresource") != -1) {
                    loacId = loacId.replace("wxlocalresource", "wxLocalResource");
                }
            }
            wx.uploadImage({
                localId: loacId, // 需要上传的图片的本地ID,由chooseImage接口获得
                isShowProgressTips: 0, // 默认为1,显示进度提示
                success: function (res) {
                    serverIdData.push(res.serverId);
                    i++;
                    i < length ? upload() : uploadBack(serverIdData);
                },
                fail: function (error) {
                    alert("失败11")
                }
            });
        }
    function wxgetLocalImgData(localIds) {
        let i = 0; let length = localIds.length;
        let upload = function () {
            wx.getLocalImgData({
                localId: localIds[i], // 图片的localID
                success: function (res) {
                    let localData = res.localData; // localData是图片的base64数据,可以用img标签显示
                    localData = localData.replace('jgp', 'jpeg');
                    // localIdImgs.push(localData);
                    // if (localIdImgs.length >= imgaesMaxLenght) {
                    //     imgLenght = false
                    // }
                    i++;
                    i < length && upload();
                }
            });
        }
        upload();
    }
    

    相关文章

      网友评论

          本文标题:微信---上传图片

          本文链接:https://www.haomeiwen.com/subject/xrywgftx.html