js使用微信上传图片功能

在说上传图片之前，先说一下准备工作，其实在上一篇微信分享功能那篇文章已经说过了，就是使用wx.config里面去把appId、timestamp、nonceStr、signature这四个参数的值给加上，这些准备工作跟分享是一样的，微信目前开放的那些方法和功能，基本都是这样的准备工作，所以，这里就不在说了，想了解的话就去分享的那篇文章看一下吧。（https://blog.csdn.net/weixin_41257563/article/details/88666588）

接下来就直接开始上传图片的功能的讲解：
上传图片相关的方法有:chooseImage(选择)、uploadImage(上传)、previewImage(预览)、downloadImage(下载)、getLocalImgData(获取本地图片)。

准备工作：

wx.config({debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。appId: 'wx7cf1ecf390e65700', // 必填，公众号的唯一标识timestamp: '1500279422', // 必填，生成签名的时间戳nonceStr: 'lilb1ozkin4yc2q98v82nysv7u663w4z', // 必填，生成签名的随机串signature: '3662a152800222194c0ef1f9a1f146e650ac2774',// 必填，签名jsApiList: ['uploadImage','previewImage','chooseImage','downloadImage','getLocalImgData'] // 必填，需要使用的JS接口列表
});

$("#btn").on('click',function () {wx.checkJsApi({jsApiList: ['uploadImage','previewImage','chooseImage','downloadImage','getLocalImgData'],success: function (res) {// alert(JSON.stringify(res));}
});//选择图片wx.chooseImage({count: 1, // 默认9，1-9张sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有success: function (res) {var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片$("img").attr('src', localIds);//上传图片wx.uploadImage({localId: ''+ localIds +'', // 需要上传的图片的本地ID，由chooseImage接口获得 isShowProgressTips: 1, // 默认为1，显示进度提示success: function (res) {var serverId = res.serverId; // 返回图片的服务器端ID//下载图片wx.downloadImage({serverId: ''+ serverId +'', // 需要下载的图片的服务器端ID，由uploadImage接口获得isShowProgressTips: 1, // 默认为1，显示进度提示success: function (res) {var localId1 = res.localId; // 返回图片下载后的本地IDalert(localId1);}});}});}         });
})；

这个例子里面，我只使用了三个方法，即：wx.chooseImage(选择)、wx.uploadImage(上传)、 wx.downloadImage(下载)。

这个例子的逻辑大概就是这样的：
1、首先选择图片，目前配置的是选择1张，选择图片的方法会返回一个res.localIds字段，这个字段就是图片的id，并且这个字段可以放在img里面去渲染的。
ps：也可以选择多个图片，返回的res.localIds使用逗号分隔的，可以去处理一下。

2、当拿到res.localIds字段后，我们就要把图片上传一下，这里的上传是指上传到微信的服务器，上传成功后会返回一个res.serverId，这就是图片在微信里的图片id。
ps：需要注意的是，上传到微信服务器后，微信只会帮助我们保存三天，所以，我们要把图片转到我们自己的服务器。

3、当拿到微信返回的serverId后，我们就要把图片下载到本地，当下载完成后，会返回一个localld，这就是本地id，但是，需要注意的是，这时候只是下载到了我们的本地，并没有下载到我们的服务器中，所以，接下来还会执行一个逻辑。
4、拿到本地id后，就需要后端同学配合了，后端同学给我们一个接口，我们去请求，然后把下载到本地的图片id传给他，他通过后台的方法拿到，并找到图片，然后存到服务器中，这里要做的是，后端得帮助我们上传一下，然后通过接口返回我们file_id,这个就是在我们自己服务器的图片id。
ps：上面那段代码里还没有加这个逻辑，但是跟后台已沟通过，并且也测试过，只是没有用接口来传输本地id而已，

这次没有使用预览和获取本地图片的方法，但也大致的说一下。

//预览图片wx.previewImage({current: '', // 当前显示图片的http链接urls: [] // 需要预览的图片http链接列表
});

ps：如果要使用预览图片的方法，就不能使用选择图片方法返回的那个id去预览，要使用http链接才可以，所以，这部操作就得在将图片传到我们自己服务器后，才可以拿到http的图片链接。

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

ps:其实这个接口是为了在ios下的webview中，不支持使用 localId 直接显示图片的问题的解决方案，就是把那个localId传个这个方法，然后他会返回我们一个base64格式的图片，以便我们在img里显示。

以上就是微信上传图片的相关功能，因为研究的还不是太深，所以理解的可能没有那么深，只是将自己目前的理解和实践得出的观点阐述一下，有可以优化或者理解不对的地方，欢迎指出。

ps:这里已经分享了两篇关于微信JSSDK中的方法了，一个分享功能，一个上传图片功能，个人觉得这两个功能都是使用频率较高的两个方法，其他一些不常用的也大致看了一下，例如：地图功能、按钮显示问题、录音功能等等，这里就不再一一赘述了，因为这些方法吧，它除了功能本身的方法外，其他都是一样的，比如上面所说的准备工作，而功能本身的问题，当准备工作没问题以后，就直接调用功能的方法，逐一去测试，去验证，按着自己的思路走就行

js使用微信上传图片功能相关推荐

Java + JS实现微信分享功能
随着腾讯帝国的强大,越来越多的APP.第三方平台需要倚靠腾讯的产品发展壮大了.微信拥有上十亿用户基础,各大小公司自然不会放过这么优质的平台,所以现在以及未来都会有很多很多与微信集成的地方,比如今天演示 ...
matlab程序模拟微信抢红包,js仿微信抢红包功能
本文实例为大家分享了Android九宫格图片展示的具体代码,供大家参考,具体内容如下仿微信抢红包 html,body,div{margin:0;padding:0;} body{background ...
微信小程序实现上传视频 / 上传图片功能以及整合上传视频 / 上传图片功能(超详细)
微信小程序有自己封装好的我们直接拿过来用就可以了接下来我们看看如何实现的吧上传图片功能效果如下: 单图上传 Page({/*** 页面的初始数据*/data: {imgList: "& ...
【全网唯一】全网唯一能够跑通的，跑不通你来找我~用node.js完成微信支付下单功能，且只需要一个文件wxpay.js就解决业务流程的node.js程序
先吐为敬! 最近心血来潮研究nodejs如何完成微信支付功能,结果网上一搜索,一大堆"代码拷贝党"."留一手"."缺斤少两"."不 ...
js调用微信扫一扫demo_JS 调用微信扫一扫功能
1.第一步: 设置调用微信js安全域名,就可以在该域名下调用微信的js接口 2.第二步: 将下面的js附在需要调用微信扫一扫的页面上,前提是需要引入微信的js[] 3.第三步: 后台获取签名代码: p ...
上传身份证照片js_html+css+js 实现拍照预览上传图片功能
前言:我们在做网页时经常会需要有上传图片的需求,可能是选择图片或者拍照上传,如果简单的使用这种方式虽然也能实现功能,但用户体验上可能会差了一些,所以本文记录了使用css+js实现图片选中后的预览及压缩 ...
微信分享功能问题-描述内容换行，导致js加载失败
jsContent内容存在换行符,导致js处理失败, 解决办法,在后台接口中替换'/r/n'为空,并截取前30位 weiXinJsSdk.setSharcontent(StringUtils.isNo ...
html实现微信扫一扫,JS 实现微信扫一扫功能
具体代码如下所示: 调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印. appId : d.appId,// 必填 ...
java+ jsp+js 实现富文本编辑和上传图片功能
java+ jsp+js 实现富文本编辑和上传图片功能使用kindeditor富文本插件: - kindeditor富文本官网地址详细的文档和demo都有下面是实现步骤: -导入项目中相关的文件 ...
微信公众号菜单html5,Vue.js 实现微信公众号菜单编辑器功能(一)
学习一段时间Vue.js,于是想尝试着做一个像微信平台里那样的菜单编辑器,在这里分享下具体样式代码查看项目github 创建一个vue实例 var app = new Vue({ el: '#app ...

js使用微信上传图片功能

js使用微信上传图片功能相关推荐

最新文章

热门文章