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

article/2025/11/8 16:24:11

一、微信公众号图片上传_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,分享接口常用逻辑分装

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


http://chatgpt.dhexx.cn/article/TimGqqUp.shtml

相关文章

web 全栈

Web 开发技术结构

2019最新Web全栈架构师第九期视频教程全套

如需下载教程,请到原文链接下载 视频好不好,谁看谁知道,话不多说,先看目录: 课件代码软件资料 01课 vue核心API&&组件设计 (2019.3.15) 02课 Vue-router&Vuex (2019.3.…

Web全栈~18.jQuery

Web全栈~18.jQuery 上一期 jQuery是JavaScript的一个函数库,对JavaScript进行了一个封装。jQuery将常用的、复杂的操作进行函数化封装,直接调用,大大降低了使用JavaScript的难度,改变了使用JavaScript的习惯。 jQuery能做的JavaScript也能做…

处女作《Web全栈开发进阶之路》出版了!

书中源码下载地址:https://github.com/qinggee/WebAdvanced 01、 当初决定写博客的原因非常的纯洁:只要每个月写上 4 篇以上博客,月底的绩效奖金就多 500 块。你可能会好奇地问,哪里会有这么好的公司呢?偷偷地告诉你…

小白都能看懂的实战教程 手把手教你Python Web全栈开发(DAY 3)

小白都能看懂的实战教程 手把手教你Python Web全栈开发 Flask(Python Web)实战系列之在线论坛系统 第三讲 这是小白都能看懂的实战教程 手把手教你Python Web全栈开发 的第三讲,如果文中有基础知识不太熟悉的话,可以看博主前几期的博客: 本文…

【哈士奇赠书活动 - 18期】-〖Flask Web全栈开发实战〗

文章目录 ⭐️ 赠书活动 - 《Flask Web全栈开发实战》⭐️ 编辑推荐⭐️ 内容提要⭐️ 赠书活动 → 获奖名单 ⭐️ 赠书活动 - 《Flask Web全栈开发实战》 内容简介: 《Flask Web全栈开发实战》围绕 Flask 框架,详细地讲解了使用 Flask 开发网站的各项技…

java web全栈漫谈

点击上方“ java工会 ”,选择“置顶公众号” 关注我,查看更多全栈相关技术! 原文:https://www.aliyun.com/jiaocheng/1124708.html 一个项目从需求确认到上线,生命周期其实还是挺长的。作为一般公司的话,分工是比较具体的,比如从需…

Web全栈~34.CAS

Web全栈~34.CAS 上一期 原子变量 Java并发包中的原子变量有以下几种 AtomicBoolean:原子Boolean类型,常用来在程序中表示一个标志位。 AtomicInteger:原子Integer类型。 AtomicLong:原子Long类型,常用来在程序中生成…

PythonWeb全栈开发介绍

文章目录 1 什么是Web开发2 Python Web开发技能点3 什么是全栈开发4 技术选型如何开始 1 什么是Web开发 权威定义 Web(World Wide Web)即全球广域网也称为万维网,它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息…

Web全栈~17.购物车案例(JavaScript动态效果)

Web全栈~17.购物车案例(JavaScript动态效果) 上一期 前言 前三期已经对购物车的样式绘制完毕,那么这一期就用JavaScript来实现动态效果。 全选 思路 可以在input标签里,添加单击事件,并且传递一个this。这个this就会把input本身传递过去。 <li><input type"ch…

java web全栈_web全栈java开发哪个前景好

展开全部 全栈和java哪个能更好62616964757a686964616fe58685e5aeb931333365633862迎合市场需求&#xff0c;有同学咨询学习哪个在以后前景和工作薪水上能更吃香&#xff0c;首先我们先来了解下Java开发和全栈开发的区别。 全栈开发工程师是指掌握多种技能&#xff0c;能够独立…

Web全栈开发基础(小白入门版本)

博客传送门 近几个月认真写了写Web全栈代码&#xff0c;有点小收获这里分享一下。我还做了个PPT&#xff0c;资源路径 欢迎拍砖指点&#xff01; Web全栈开发是一个听起来很虎的名词。本文从技术层面解释全栈开发&#xff0c;能帮助没有全栈概念&#xff0c;或者说对相关技术…

web全栈开发项目搭建整体思路和学习路线

web全栈开发 全栈开发技术介绍&#xff1a; 全栈技术指可以完整整个项目搭建的有效集合。 包括&#xff1a;网站的设计&#xff0c;web前端开发&#xff0c;web后端开发&#xff0c;数据库设计&#xff0c;接口和组件&#xff0c;移动端开发&#xff0c;产品设计&#xff0c;系…

mysql建立索引的几大原则

1&#xff0e;选择唯一性索引 唯一性索引的值是唯一的&#xff0c;可以更快速的通过该索引来确定某条记录。例如&#xff0c;学生表中学号是具有唯一性的字段。为该字段建立唯一性索引可以很快的确定某个学生的信息。如果使用姓名的话&#xff0c;可能存在同名现象&#xff0c…

MySQL建立索引的正确姿势与使用索引的最佳指南!

引言 数据库索引&#xff0c;绝对是MySQL的核心功能之一&#xff0c;如果没有索引机制的数据库&#xff0c;那数据的检索效率绝对是令人无法接受的&#xff0c;毕竟没有索引的表数据&#xff0c;就如同一个普通的文本文件存储在磁盘中。在《索引上篇》中&#xff0c;我们对于M…

mysql创建索引语句

1:表结构 2:创建索引语句 alter table staffs add index idx_staffs_nameAgePos(NAME,age,pos); 执行后效果

MySQL建立索引的注意事项

大家都知道对数据库表字段建立索引可以有效的提升数据的查询效率&#xff0c;但索引也不是随便建立的&#xff0c;需要我们对建立索引的规范有一定的了解&#xff0c;才能更好的发挥出索引的优势&#xff0c;避免因为滥建索引反而带来整体性能的下降。 1、哪些列上建立索引&am…

MySQL之创建索引

文章目录 MySQL之创建索引1.五种索引分类2.创建表后创建索引命令(create)3.创建表后创建索引命令(alter)3.1单列主键索引3.2单列唯一索引3.3组合唯一索引3.4单列普通索引3.5组合普通索引3.6单列全文索引 4.创建表时创建索引命令(create)4.1单列主键索引(不起名)4.2组合普通索引…

MySQL几种创建索引的方式

一、创建表时创建索引 key 索引名 &#xff08;column&#xff09;&#xff1b; 二、表创建好后创建索引 1、通过Alter创建索引 ①PRIMARY KEY&#xff08;主键索引&#xff09; mysql > ALTER TABLE table_name ADD PRIMARY KEY ( column ) ②UNIQUE(唯…

Mysql 创建索引

数据库建立索引常用的规则如下&#xff1a; 1、表的主键、外键必须有索引&#xff1b; 2、数据量超过300的表应该有索引&#xff1b; 3、经常与其他表进行连接的表&#xff0c;在连接字段上应该建立索引&#xff1b; 4、经常出现在Where子句中的字段&#xff0c;特别是大表的…