微信公众号开发图片上传案例
生活随笔
收集整理的這篇文章主要介紹了
微信公众号开发图片上传案例
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
最近有需求做到公眾號(hào)開(kāi)發(fā),有一個(gè)上傳圖片的功能,查看了微信公眾號(hào)的開(kāi)發(fā)文檔,故做如下記錄。
公眾號(hào)中上傳圖片的大概流程是:
1、調(diào)用config接口注入權(quán)限(接口標(biāo)識(shí)具體參考微信公眾平臺(tái)的附錄,我這邊需要注入chooseImage、uploadImage)
wx.config({// debug: true, // 開(kāi)啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來(lái),若要查看傳入的參數(shù),可以在pc端打開(kāi),參數(shù)信息會(huì)通過(guò)log打出,僅在pc端時(shí)才會(huì)打印。appId: appId, // 必填,公眾號(hào)的唯一標(biāo)識(shí)timestamp: timestamp, // 必填,生成簽名的時(shí)間戳nonceStr: nonceStr, // 必填,生成簽名的隨機(jī)串signature: signature,// 必填,簽名,見(jiàn)附錄1jsApiList: ['chooseImage','uploadImage'] // 必填,需要使用的JS接口列表,所有JS接口列表見(jiàn)微信公眾平臺(tái)附錄 });2、調(diào)用選擇圖片(chooseImage)的接口啟用選擇手機(jī)圖片的功能,選擇完圖片后調(diào)用上傳接口(uploadImage)上傳圖片到微信的服務(wù)器,返回serverId
var that = this,imageLength=9;var image={localIds:[],serverId:[]}; //接收微信接口返回的參數(shù)
var imageUrlList=[] //用戶綁定頁(yè)面上顯示圖片的變量
var mediaIds=[] //接收上傳圖片返回的serverId(該字段就是調(diào)用獲取臨時(shí)素材接口的媒體ID)
//1.選擇圖片
wx.chooseImage({count: imageLength, //上傳圖片的張數(shù),最多上傳9張sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,默認(rèn)二者都有
sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī),默認(rèn)二者都有success: function(res) {that.images.localIds = res.localIds;//展示圖片for (var i=0;i<res.localIds.length;i++) {that.imageUrlList.push(res.localIds[i]);}var uploadCount = 0;var localIdLength = that.images.localIds.length;var upload = function() {
// 2.上傳圖片wx.uploadImage({localId:that.images.localIds[uploadCount], //選擇的圖片標(biāo)識(shí)success: function(res) {that.images.serverId.push(res.serverId); //微信返回的該圖片的服務(wù)ID,可調(diào)用獲取素材的接口下載到自己項(xiàng)目的應(yīng)用服務(wù)器var mediaIdsLength = that.mediaIds.length;var flag = false;if (mediaIdsLength>0) {for (var i=0;i<mediaIdsLength;i++) {if (that.mediaIds[i].id == value.id) {that.mediaIds[i].mediaId.push(res.serverId);}flag = true;}}if (!flag) {var item = {id:'',mediaId:[]};item.id = value.id;item.mediaId.push(res.serverId);that.mediaIds.push(item);}//如果還有照片,繼續(xù)上傳uploadCount++;if (uploadCount < localIdLength) {upload();}},fail: function(res) {alert(JSON.stringify(res));}});};
//循環(huán)上傳upload();},fail: function(res) {alert(JSON.stringify(res));} });
?3、最后調(diào)用獲取臨時(shí)素材的接口,
http請(qǐng)求方式: GET,https調(diào)用https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID
請(qǐng)求示例(示例為通過(guò)curl命令獲取多媒體文件)
curl -I -G "https://api.weixin.qq.com/cgi-bin/media/get?access_token=ACCESS_TOKEN&media_id=MEDIA_ID"
access_token:接口調(diào)用憑證 media_id:媒體ID,(上傳圖片返回的serverId)
接口返回: {
"video_url":DOWN_URL
}
轉(zhuǎn)載于:https://www.cnblogs.com/mark8080/p/8707485.html
總結(jié)
以上是生活随笔為你收集整理的微信公众号开发图片上传案例的全部?jī)?nèi)容,希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇: 安装该设备时去现一个错误,系统找不到指定
- 下一篇: 【定时任务】