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

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

作者: 人间四月天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