美文网首页程序员
微信内置浏览器多张上传图片并传递给后台

微信内置浏览器多张上传图片并传递给后台

作者: 人间四月天i | 来源:发表于2021-01-15 11:34 被阅读0次
    <form method="post" action="{:url('feed_back/set_my_feedback')}">
        <div class="pic">
            <div class="uploadImage" onclick="chooseImage()"></div>
        </div>
        <button class="opinion_btn">提交反馈</button>
    </form>
    <script>
        var wurl = window.location.href;
        var wx_share = function () {
            var url = wurl;
            $.ajax({
                url: "xxxxxxx",
                type: "post",
                data: { "index_url": url },
                success: function (res) {
                    if (res.code == 200) {
                        var data = res.data.config;
                        wx.config({
                            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                            appId: data.appId, // 必填,企业号的唯一标识
                            timestamp: data.timestamp, // 必填,生成签名的时间戳
                            nonceStr: data.nonceStr, // 必填,生成签名的随机串
                            signature: data.signature,// 必填,签名,见附录1
                            jsApiList: [
                                'onMenuShareTimeline',
                                'onMenuShareAppMessage',
                                'chooseImage',
                                'uploadImage',
                                'downloadImage'
                            ]
                        });
                    }
                },
                error: function (res) { }
            });
        };
        wx_share();


        // 解决上传多张图片时serverId重复,使用递归解决
       // 使用递归会导致重复追加,所以追加的时候不能使用+=,使用=
        var htmlPhoto="";
        var localIds;
        function  chooseImage () {
            wx.chooseImage({
                count: 9,
                sizeType: ['compressed'], // 可以指定是原图还是压缩图,默认二者都有
                sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
                defaultCameraMode: "normal", 
                success: function (res) {
                    localIds = res.localIds; //获取图片的临时路径
                    htmlPhoto="";
                    updateBase64Data();
                },
                fail: function (res) {
                    alert('选择图片失败:' + res.errMsg);
                },
            });
        }
        function updateBase64Data() {
            if (!localIds.length) {
                console.log('上传成功!');
            } else {
                var localId = localIds.pop();
                wx.uploadImage({
                    localId: localId,
                    success: function(res) {
                        var serverId = res.serverId; // 返回图片的服务器端ID
                        htmlPhoto ='<div class="imgdiv"><img class="del_img" src="/static/theme/img/camp/del_img.png"/><img src='+ localId+' /><input type="hidden" name="serverId[]" value='+serverId+' /></div>';
                        $(".uploadImage").before(htmlPhoto);
                        updateBase64Data(); //如果还有图片就继续追加

                    }
                });
            }
        }
      
        $(document).on("mouseup",".del_img",function(){
            $(this).parent().remove()
        })
    </script>

点击提交时将每个图片的serverId 传到后台,让后台去微信的素材库下载、处理。

相关文章

网友评论

    本文标题:微信内置浏览器多张上传图片并传递给后台

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