微信公众号图片上传_base64图片上传处理

一、微信公众号图片上传_base64图片上传处理

使用到的接口拍照、选择相册接口； 读取本体图片接口

1.拍照或从手机相册中选图接口

wx.chooseImage({
  count: 1, // 默认9
  sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
  sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
  success: function (res) {
  var localIds = res.localIds; // 返回选定照片的本地 ID 列表，localId可以作为 img 标签的 src 属性显示图片
  }
});

2.获取本地图片接口

wx.getLocalImgData({
  localId: '', // 图片的localID
  success: function (res) {
    var localData = res.localData; // localData是图片的base64数据，可以用 img 标签显示
  }
});

二、前端处理

       var isWechat = false;//判断是否是微信浏览器绑定
        //获取js配置权限
        $.get('http://xxx/common/GetJsConfig', {
            url: encodeURIComponent(location.href)
        }, function (res) {
            wx.config({
                debug: false, // 开启调试模式,调用的所有 api 的返回值会在客户端 alert 出来，若要查看传入的参数，可以在 pc 端打开，参数信息会通过 log 打出，仅在 pc 端时才会打印。
                appId: res.appId, // 必填，公众号的唯一标识
                timestamp: res.timestamp,// 必填，生成签名的时间戳
                nonceStr: res.nonceStr, // 必填，生成签名的随机串
                signature: res.signature,// 必填，签名
                jsApiList: ['chooseImage', 'getLocalImgData'] // 必填，需要使用的 JS 接口列表
            });
        });
        wx.ready(function () {
            //config验证成功
            // alert('配置结束');
            isWechat = true;
        });

        window.onload = function () {
            setTimeout(() => {
                if (isWechat) {
                    //微信浏览器绑定处理
                    wxUpload();
                }
                else {
                    commonUpload();
                }
            }, 1000);
        }

微信浏览器上传图片

      //微信上传
        function wxUpload() {
            $('#uploadBtn1').click(function () {
                //选择图片
                wx.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success: function (res) {
                        var localIds = res.localIds; // 返回选定照片的本地 ID 列表，localId可以作为 img 标签的 src 属性显示图片
                        //  alert(localIds);
                        //获取图片base64数据
                        wx.getLocalImgData({
                            localId: localIds[0], // 图片的localID
                            success: function (res) {
                                var localData = res.localData; // localData是图片的base64数据，可以用 img 标签显示
                                // alert('图片数据：'+localData);
                                //上传图片，返回图片相对地址

                                $.post('http://xxxxx/mall/SaveBase64', {
                                    imgdata: localData
                                }, function (data) {
                                    if (data.relativeName) {
                                        var link = "http://xxxxx" + data.relativeName;

                                    }
                                    else {
                                        alert(data.msg);
                                    }
                                });
                            }
                        });
                    }
                });
            });
        }

 

三、后台端处理

        //上传base64图片
        public IActionResult SaveBase64()
        {
            try
            {
                //imgdata = SecurityHelper.HTMLDecode(imgdata);
                string imgdata = this.HttpContext.Request.Form["imgdata"];
                if (imgdata.Contains("base64"))
                {
                    imgdata = imgdata.Split(",")[1];
                }
              //  LogHelper.Write(imgdata);
                byte[] byteData = Convert.FromBase64String(imgdata);
                MemoryStream ms = new MemoryStream();
                ms.Write(byteData, 0, byteData.Length);
                Image img = Image.FromStream(ms);
                string path = UploadHandle.ServerInfo.SitePath + "/upload/base64/";
                if (Directory.Exists(path) == false)
                    Directory.CreateDirectory(path);
                string filename=Guid.NewGuid().ToString() + ".jpg";
                path += filename;
               string  relativeName = "/upload/base64/" + filename;
                img.Save( path, ImageFormat.Jpeg);
                img.Dispose();
                return Json(new
                {
                    relativeName
                });
            }
            catch (Exception ex)
            {
                return Error(ex);
            }
        }

特别问题注意：

1.Android系统的微信获取的图片base64位的字符串内容，没有 image/jpeg;base64

2.IOS 系统的微信获取的图片base64数据，含有 image/jpeg;base64

更多：

微信js-sdk 预览图片接口&从拍照或手机相册中选图接口

微信js-sdk，分享接口常用逻辑分装

微信 js-sdk 界面操作接口使用