微信公众号前端-上传图片小记

需求和流程

选择之前都是默认信息，包括资质名称和默认图片。
选择之后，显示用户选择的职称和图片，图片右上角×出现
点击提交，弹窗显示提交成功
点击×号，清除图片src，和serverId（我就是忘了清除serverId，导致用户点击×号还可以提交，然后我们后台显示的就是空图片···）
点击×号提交之后因为没有serverId，所以提醒用户重新上传图片

话不多说，先来源代码

//微信上传图片
// 思路：
// 研究微信jssdk开发文档
// 微信要求：通过config接口注入权限验证配置
// 先发送请求，获取到后台给的appId、timestamp、nonceStr、signature数据
// 然后在请求成功的回调里面注入权限验证配置
var wxUrl = HOST + "/Register/GetWXInfo";
$.ajax({method: "GET",url: wxUrl,dataType: "json",success: function(res) {console.log(res);// 通过config接口注入权限验证配置wx.config({// debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: res.WeiXinAppId, // 必填，公众号的唯一标识timestamp: res.Timestamp, // 必填，生成签名的时间戳nonceStr: res.CreatenNonce_str, // 必填，生成签名的随机串signature: res.Ticket, // 必填，签名，见附录1jsApiList: ["chooseImage", "uploadImage"] // 必填，需要使用的JS接口列表，所有JS接口列表见微信公众平台附录});}
});// 具体上传图片
/**
* @param {*选中显示图片} showImg
* @param {*隐藏图片} hideImg
* @param {*关闭按钮} closeIcon
*/
function chooseImg(showImg,hideImg,closeIcon) {//拍照或从手机相册中选图接口wx.chooseImage({count: 1,sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有sourceType: ["album", "camera"], // 可以指定来源是相册还是相机，默认二者都有success: function(res) {var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片console.log(localIds);wx.uploadImage({localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得isShowProgressTips: 1, // 默认为1，显示进度提示success: function(res) {serverId = res.serverId;$(showImg).attr('src', localIds[0]); // 将localIds[0]值给src$(showImg).data("serverId", serverId); // 要给后端返回serverId，此处新定义一个属性，方便获取serverId的值$(hideImg).hide(); // 默认的图片隐藏$(showImg).show(); // 新上传的图片显示$(closeIcon).show(); // 右上角关闭图标显示},});}});
}
// 之后就可以到对应的js文件里面去修改了，主要是要替换掉原来的方法，再把之前传给后端的src参数改成serverId就好了。

需求和流程

公司原先用的plupload插件选择图片，但选择图片过程有点一言难尽，而且存在兼容性问题，所以，老板让改成微信原生的方法上传。
我之前也没接触过公众号呐，那有需求怎么办，先看文档呗！这是地址=>微信开放文档

以上主要看前三步，第一步第二步已经做了，我只做了第三步，以及之后的调用接口，考虑到这个项目很多个地方都需要调用这个方法，我独立封装了一个uploadImg的js文件。

后端主要是要这个serverId，把图片上传到阿里云服务器。

小白踩坑

config参数都是要在请求之后获得的，所以要写在ajax回调里面。
要明确这里的功能，就是点击要显示图片的方框，获取到对应的localId，用于渲染页面，此处只是前端的操作，同时要获取到serverId，方便后续传给后端。要注意的是，这个公共方法不能直接发请求把serverId传给后端，而是要在对应的js文件里面再做处理，因为有的地方并不是只有一张图片上传，而点击提交之后后端要的是所有的图片。
这套代码是公司买来，我再接手的。这种一定要看好它的逻辑。在测试时遇到一个问题，就是明明localId获取到了，但是页面却没有显示，看代码，查百度，找了半天原因，结果是因为没有把默认那张图片hide掉，把新上传的show出来，我晕！！
小白一定不能慌，不能要求自己一下子就解决问题，要先屡代码，把逻辑屡顺了，后面就好写了。
逻辑捋顺的同时一定不能大意，注意代码书写，别多一个点少一个点的···我就是因为把代码写成了下面这样，还没看出来，导致bug一直有···

        $('ok-1').data('serverId', '')

选择器要写对啊亲们！！！血的教训！！！
7. 加油！

微信公众号前端-上传图片小记相关推荐

微信公众号-java上传图片素材到微信服务器基于事件推送两条消息
微信公众号-java上传图片素材到微信服务器&基于事件推送两条消息场景:基于微信扫码登录/关注事件,向用户推送两条消息. 分析:翻阅了微信开发者文档和一些其他资料发现,公众号针对用户关注/扫 ...
JS简写技巧（来自于微信公众号-前端之巅）
JS简写技巧来自于微信公众号-前端之巅 1 声明变量 //Longhand// let x ;// let y = 20;// shortandlet x, y = 20; 2 给多个变量赋值我们 ...
微信公众号前端开发（angular6/7）
angular框架非常好用,但是国内确实资料不多,关于微信公众号开发,我只找到了17年的比较老的教程,这里对相关教程做了一个更新.感谢古尘师姐的教程. 本文档只进行到微信公众号授权登录部分,其他众多接 ...
微信公众号前端开发教程，8个优秀的CSS实践
1.ant-design的使用总结及常用组件和他们的基本用法? ant-design为React,Angular和Vue都提供了组件,同时为PC和移动端提供了常用的基础组件.ant-design提供的 ...
前端开发攻略，微信公众号前端开发教程
毕业工作一年之后,有了转行的想法,偶然接触到程序员这方面,产生了浓厚且强烈的兴趣,开始学习前端,成功收割了大厂offer,开始了我的程序员生涯. 在自学过程中有过一些小厂的面试经历,也在一些小型的互联 ...
uni-app - 最详细 H5 网页接入微信支付功能，提供从详细的示例代码与注释（移动端网页实现微信支付能力，微信公众号前端支付 JSAPI / JS-SDK 详细示例源码）官方最新超级详细教程
前言关于 uni-app 项目中接入微信支付的文章鱼龙混杂,各种 JSAPI / JS-SDK 乱代码.过时.没注释.不讲流程原理,非常难用. 本文实现了 uni-app H5 移动端网页项目,实现 ...
微信公众号内嵌页面不执行ajax,微信公众号前端开发（weui）+ajax
>> 一行代码即可使页面适应手机屏幕,具体介绍可参考链接,很好用 >> > 3. rem >> rem之后好像没怎么用,以后有更多了解再来补充 >> ...
微信公众号前端开发，学习路线图必不可少
面试题: Html 1,html语义化 2,meta viewport相关 3,canvas 相关 CSS 1,盒模型 1.1,ie盒模型算上border.padding及自身(不算margin),标 ...
ueeditor无法上传图片_微信公众号上传图片被压缩，有什么方法可以完美解决？...
微信的压缩算法一直都在修改变动,图片的清晰度和饱和度与太多因素相关,不同手机型号(手机分辨率不同),图片上传后的质量也会略微不同,微信压缩图片是为了提高加载速度,减轻服务器的压力. 在微信公众号后台上 ...
java识别农作物病虫害源码,一种基于微信公众号的农作物虫害识别方法及其系统与流程...
本发明涉及农业技术领域,具体涉及一种基于微信公众号的农作物虫害识别方法及其系统. 背景技术: 针对目前我国农作物害虫诊断大多停留在人工阶段,存在着客观性差.效率低.劳动强度大等问题,以及现有的基于图像 ...

微信公众号前端-上传图片小记

需求和流程

话不多说，先来源代码

需求和流程

小白踩坑

微信公众号前端-上传图片小记相关推荐

最新文章

热门文章