vue 使用微信jssdk， 調用微信相冊上傳圖檔

vue 使用微信jssdk

1、引入weixin-js-sdk

npm install weixin-js-sdk

使用文檔 https://www.npmjs.com/package/weixin-js-sdk

2、配置 vue中微信jssdk配置

import wx from 'weixin-js-sdk'
 created(){ //微信jssdk配置
			let timestamp=new Date().getTime();//時間戳
			let noncestr=Math.random().toString(36).substr(2);//随機字元串
			let url = "http://"+window.location.host+'/' ;//擷取錨點之前的連結 
			let dataJ={
					timestamp,
					noncestr,
					url
			}
			 //擷取簽名  https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115
			getSignatureApi(dataJ).then(res=>{//調用擷取簽名方法
					wx.config({
							debug: false,
							appId: '12312312312312', // 必填，公衆号的唯一辨別
							timestamp:timestamp , // 必填，生成簽名的時間戳
							nonceStr: noncestr, // 必填，生成簽名的随機串
							signature:res.signature,
							jsApiList: [
									'chooseImage',//選擇圖檔
									'uploadImage'//上傳圖檔
								] // 必填，需要使用的JS接口清單
					});
		})
}
           

3、使用

methods: {
      choseFile:function(id,index){//點選事件選擇圖檔
				var _this=this;
				wx.chooseImage({//
						count: 1, // 預設9
						sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，預設二者都有
						sourceType: ['album', 'camera'], // 可以指定來源是相冊還是相機，預設二者都有
						success: function (res) {
							let localId=res.localIds;//擷取到本地localIds
							wx.uploadImage({//上傳到微信伺服器
									localId: localId.toString(), // 需要上傳的圖檔的本地ID，由chooseImage接口獲得
									isShowProgressTips: 1, // 預設為1，顯示進度提示
									success: function (ret) {}
							});
						}
				});
		}
}