微信上传图片

最新推荐文章于 2021-09-23 16:46:21 发布

原创最新推荐文章于 2021-09-23 16:46:21 发布 · 751 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #微信图片上传 #多张图片上传 #微信sdk

第一步：登录微信公众平台。

设置——公众号设置——得到原始ID
这里写图片描述
设置——公众号设置——功能设置——配置JS接口安全域名

第二步：引入JS文件。

在需要调用JS接口的页面引入JS文件：http://res.wx.qq.com/open/js/jweixin-1.0.0.js
如果你的页面启用了https，引入JS文件：https://res.wx.qq.com/open/js/jweixin-1.0.0.js

第三步：通过config接口注入权限验证配置

var pathName = window.location.pathname + window.location.search + window.location.hash;
var sendData = {
        "param": JSON.stringify({
            "ghId": "第一步得到的原始ID",
            "url": "第一步配置的域名"+ pathName
        })
    };
    ece.post("接口地址", sendData).suc(function (result) {
        if(0 == result.code){
        //所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用
            wx.config({
                debug: false,
                appId: result.data.appId,
                timestamp: result.data.timestamp,
                nonceStr: result.data.nonceStr,
                signature: result.data.signature,
                jsApiList:[//需要使用的JS接口列表
                    'chooseImage',
                    'uploadImage'
                ]
            });
        }
    }).err(function (result) {
     });

第四步：通过ready接口处理成功失败验证

//单张图片上传
wx.ready(function(){
    $("#infoHead").click(function(){
            wx.chooseImage({//选择图片
            count: 1,
            sizeType: ['original', 'compressed'],
            sourceType: ['album', 'camera'],
            success: function (res) {
              wx.uploadImage({//上传图片
                localId: res.localIds[0],
                isShowProgressTips: 1,
                success: function (res) {
                 // 返回图片的服务器端ID
                 var serverId = res.serverId;

                //为了用户体验，先直接读取，因为从服务器读取需要一定时间。
                //之后服务器读取图片完成替换。                    
                ----------------------------------------
                //直接读取图片,有效期3天.               
                 $(".vipimg").attr("src", res.localIds);
                 //从服务器读取图片.
                 ece.get("接口" + serverId).suc(function (res) {
                    if('0' === res.code){
                       $(".vipimg").attr("src", res.data);
                    }
                 });                    
                });
              });
            }
            });
        }
    })
});
wx.error(function (res) {
    console.log(res.errMsg);
});

备注：上传图片有效期3天，可用微信多媒体接口下载图片到自己的服务器，此处获得的 serverId 即 media_id。

//多张图片上传
wx.ready(function(){
$('#filePicker').on('click', function () {
    wx.chooseImage({
        count: 6,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: function (res) {
            var localIds = res.localIds;
            syncUpload(localIds);
        }
    });
});
});
var syncUpload = function(localIds){
    var localId = localIds.pop();
    wx.uploadImage({
        localId: localId,
        isShowProgressTips: 1,
        success: function (res) {
            var serverId = res.serverId; // 返回图片的服务器端ID
            //其他对serverId做处理的代码
            if(localIds.length > 0){
                syncUpload(localIds);
            }
        }
    });
};