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

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

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

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

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

2.获取本地图片接口

wx.getLocalImgData({localId: '', // 图片的localIDsuccess: 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, // 默认9sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {var localIds = res.localIds; // 返回选定照片的本地 ID 列表，localId可以作为 img 标签的 src 属性显示图片//  alert(localIds);//获取图片base64数据wx.getLocalImgData({localId: localIds[0], // 图片的localIDsuccess: 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 界面操作接口使用

微信公众号图片上传_base64图片上传处理相关推荐

PHP curl模拟表单上传文件微信公众号素材管理接口crul文件上传核心源码
PHP curl模拟表单上传文件微信公众号素材管理接口crul文件上传核心源码 /*** curl 上传文件* @param $url* @param $filePath* @param stri ...
UI-网站首页轮播图、易拉宝、发布在微信公众号的宣传海报的图片设计信息
UI交互设计一."新建" 常见的颜色模式: 颜色模式,是将某种颜色表现为数字形式的模型,或者说是一种记录图像颜色的方式.分为:RGB模式.CMYK模式.HSB模式.Lab颜色模式 ...
获取微信公众号的二维码图片
获取微信公众号二维码步骤第一步: 进入相关公众号,查看公众号的微信号: 第二步: 在浏览器地址栏输入(http://open.weixin.qq.com/qr/code/?username=leav ...
当“低代码”遇上“微信公众号”，当“系统搭建”遇上“社交流量”
微信作为一个社交媒体平台,人均单日使用时间达到了85.8分钟,其推出的公众平台凭借着便捷灵活的操作方式,受到广大企业宣传的青睐和重视,成为企业对外传播品牌文化,市场营销的重要途径. 腾讯最新财报显示: ...
微信公众号自定义分享标题、图片、链接
脚本之家 https://www.jb51.net/Special/935.htm 微信JS接口签名校验工具 https://mp.weixin.qq.com/debug/cgi-bin/sandb ...
微信公众号文章中如何添加及上传pdf、doc、xls等文件给粉丝下载
在这个信息化的时代,越来越多的人都开始利用网络社交软件获取或者传播资讯在众多的社交软件中,微信绝对是最大的社交平台与日俱增的用户群,是政府.企事业单位与用户沟通.信息交流的优质平台因此越来越多的 ...
微信公众号怎么放这种带图片的链接?
其实就是给图片添加超链接, 简单来说,图片添加超链接之后,图片右上角会自动生成一个跳转小图标,读者点击该图片就会跳转到其它页面.但是公众号对跳转的网页链接有如下限制: 订阅号和未开通微信支付功能的服务 ...
php 微信公众号分享自定义标题,简介,图片
1.必须有认证的公众号 2.设置域名到JS接口安全域名 3.设置IP白名单 4.查看微信JS-SDK说明文档文档 https://developers.weixin.qq.com/doc/offia ...
教你实现微信公众号效果：长按图片保存到相册
不知道各位对于这个需求要如何解决? 可能有些人会想到js与原生交互,js监听图片点击事件,然后将图片的url传递给原生App端,然后原生App将图片保存到相册,这样子麻烦吗?超麻烦.(1).js监听图 ...
Java开发微信公众号之被动回复用户消息-回复图片消息
一.前言 hello小伙伴们,大家好,做微信开发两年了,最近看到微信方面的文章阅读量和关注量上升的比较快速,激发了我满满的动力啊,所以就滋生了一个想法,从头开始整理一下微信公众号开发,写一个简易的教程 ...

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

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

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

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

微信公众号图片上传_base64图片上传处理相关推荐

最新文章

热门文章