接微信接口单图片上传

首先在js中要引入jweixin.js

<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

在调取拍照之前,进行微信环境配置

wx.config({
        debug: false,
        appId: '此公众号的id', // 必填,公众号的唯一标识
        timestamp: {$jsSign['timestamp']}, // 必填,生成签名的时间戳,切记时间戳是整数型,别加引号
        nonceStr: '{$jsSign.noncestr}', // 必填,生成签名的随机串
        signature: '{$jsSign.signature}', // 必填,签名,见附录1
        jsApiList: [
            'checkJsApi',
            'chooseImage',
            'previewImage',
            'uploadImage',
            'downloadImage',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
        ]
    });

接下来就是通过一个点击事件来触发拍照功能咯

var serverId=[];
    serverId[0] = [];
    var u = navigator.userAgent;
    var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; // android终端
    var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);   // ios终端
    // 上传图片并获取信息
    $(“触发点").on('click',function(){
        var _this = $(this);
        wx.chooseImage({
            count: 1, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
            success: function (res) {
                var localIds = res.localIds;
                // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片
                syncUpload(localIds,_this);  // 图片的下载
                /*localIds.forEach(function(element){
                    _this.attr('data-tab',element);
                    _this.attr('src',element);
                });*/
            }
        });
    });
var syncUpload = function(localIds,_this){
        var localId = localIds.shift();
        var has = _this;
        wx.uploadImage({
            localId: localId,
            success: function (res) {
                if(has.hasClass("")){
                    serverId[0].push(res.serverId); // 返回图片的服务器端ID
                    $.ajax({
                        type: "post",
                        url: "{:Url('User/setHeader')}",
                        data: {
                            header: serverId   // 这里是二级数据形式
                        },success: function (data) {
                            if (data.code == 1) {
//                              has.attr('data-tab',data.data);
//                              has.attr('src',data.data);
                                location.reload();
                            }else {
                            }
                        },error: function (data) {
                            swal({
                                title: "",
                                text: '上传失败,请重新上传',
                                type: 'error',
                                showCancelButton: false,
                                confirmButtonText: "确定",
                                allowOutsideClick:false,
                                timer: 1500
                            });
                        }
                    })
                }
                // 其他对serverId做处理的代码
                if(localIds.length > 0){
                    if(isiOS){
                        syncUpload(localIds,_this);
                    }else{
                        setTimeout(function(){
                            syncUpload(localIds,_this);
                        },500)
                    }
                }
            }
        });
    };
});

补充下html的代码

<img class="img" src="" data-tab="">
<input type="file" class="hide" id="upload" accept="image/*">

猜你喜欢

转载自blog.csdn.net/m0_37852904/article/details/80136967
今日推荐