呼叫微信JS-SDK上傳圖片爬坑之路
阿新 • • 發佈:2019-01-27
最近最用 vue 開發微信服務號 ,也是第一次呼叫微信的sdk , ( 先吐槽下自己 斷斷續續的整理一個星期才搞出來 ) 日了狗了 ,坑太多 , 更多是 ios 不相容 ,圖片不顯示呀 , 不能上傳多張啦 這裡就可以幫你解決 ! 廢話不多說 直接上程式碼 :
第一步 :首先你得引人 檔案:
http://res.wx.qq.com/open/js/jweixin-1.2.0.js (目前最新版本)
支援使用 AMD/CMD 標準模組載入方法載入 同時也支援 npm 安裝
第二步:通過config介面注入許可權驗證配置 (獲取簽名)
getUrlConfig(){
let wiexin = apiRouter.GET_CONFIG + encodeURIComponent(this.urlPath)
this.$http.get(wiexin).then(response => {
let data = response.body
wx.config({
// debug: true, // 開啟除錯模式,呼叫的所有api的返回值會在客戶端alert出來,若要檢視傳入的引數,可以在pc端開啟,引數資訊會通過log打出,僅在pc端時才會列印。
appId: data.appId, // 必填,企業號的唯一標識,此處填寫企業號corpid
timestamp: data.timestamp, // 必填,生成簽名的時間戳
nonceStr: data.nonceStr, // 必填,生成簽名的隨機串
signature: data.signature,// 必填,簽名,見附錄1
jsApiList: ["chooseImage", "uploadImage", "downloadImage",]
// 必填,需要使用的JS介面列表
});
wx.error(function (res) {
alert(res)
});
}, response => {
// console.log("請求失敗了!!!!")
});
},
getUrlConfig 方法裡面得
let wiexin = apiRouter.GET_CONFIG + encodeURIComponent(this.urlPath)
apiRouter.GET_CONFIG :這個是我 url 定義得常量
encodeURIComponent :可把字串作為URI 元件進行編碼
this.urlPath : 當前得url
這個時候就可以看到成功與否了!
第三步 : 選擇圖片
onClickUp(){
let _this = this;
wx.chooseImage({
count: _this.imgaesMaxLenght - _this.localIdImgs.length, // 預設9
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖,預設二者都有
sourceType: ['album', 'camera'], // 可以指定來源是相簿還是相機,預設二者都有
success: function (res) {
let localIds = res.localIds; // 返回選定照片的本地ID列表,localId可以作為img標籤的src屬性顯示圖片
// 判斷 ios
if (window.__wxjs_is_wkwebview) {
_this.wxgetLocalImgData(localIds);
}else{
localIds.forEach((item, index) => {
_this.localIdImgs.push(item);
if( _this.localIdImgs.length >= _this.imgaesMaxLenght ){
_this.imgLenght = false
}
});
}
_this.wxuploadImage(localIds);
},
fail: function (res) {
console.log("失敗")
}
});
}
然後你們自己看吧
wxuploadImage(localIds) {
let _this = this;
var i = 0; var length = localIds.length;
var upload = function() {
let loacId = localIds[i];
if (window.__wxjs_is_wkwebview) {
if (loacId.indexOf("wxlocalresource") != -1) {
loacId = loacId.replace("wxlocalresource", "wxLocalResource");
}
}
wx.uploadImage({
localId: loacId, // 需要上傳的圖片的本地ID,由chooseImage介面獲得
isShowProgressTips: 1, // 預設為1,顯示進度提示
success: function (res) {
// alert(res.serverId);
var serverId = {
id:'',
serverid:res.serverId
}
_this.serverId.push(serverId);
i++;
i < length && upload();
},
fail: function (error) {
alert("失敗11")
}
});
}
upload();
},
wxgetLocalImgData(localIds){
let _this = this;
var i = 0; var length = localIds.length;
var upload = function() {
wx.getLocalImgData({
localId: localIds[i], // 圖片的localID
success: function (res) {
let localData = res.localData; // localData是圖片的base64資料,可以用img標籤顯示
localData = localData.replace('jgp', 'jpeg');
_this.localIdImgs.push(localData);
if( _this.localIdImgs.length >= _this.imgaesMaxLenght ){
_this.imgLenght = false
}
i++;
i < length && upload();
}
});
}
upload();
},
到這裡程式就以及完成了 , 程式碼可以直接 複製用 !
經測試 android ios 都相容