一、微信公众号图片上传_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
更多: