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) {}
							});
						}
				});
		}
}
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值