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

微信---上传图片

作者: 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