企业微信选择图片JS-SKD
2022-04-06 本文已影响0人
努力study代码的小哪吒
- 开发功能
点击选择图片,然后可以单选可进行多选,使用企业微信SDK开发 - 代码
data () {
return : {
file: null
}
}
created () {
wx.config({
beta: true, // 必须这么写,否则wx.invoke调用形式的jsapi会有问题
debug: process.env.NODE_ENV === 'development',
url: 'https://local.gokuaidian.com/wxTest',
// 必填,公众号的唯一标识
appId: 'wx7a7473dc74ee337',
// 必填,生成签名的时间戳
timestamp: '1645522276608',
// 必填,生成签名的随机串
nonceStr: '4eb1e981-b661-4d77-886b-414c9bccdfcf',
// 必填,签名
signature: '99c9dc29faf8956342df4ffb625c94d2155cd3b2',
// 必填,需要使用的JS接口列表
jsApiList: ['chooseImage', 'getLocalImgData']
})
},
methods: {
chooseImage () {
const _this = this
wx.ready(function () {
wx.chooseImage({
count: _this.num - _this.dataUrl.length, // 默认9
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
defaultCameraMode: 'batch', // 表示进入拍照界面的默认模式,目前有normal与batch两种选择,normal表示普通单拍模式,batch表示连拍模式,不传该参数则为normal模式。从3.0.26版本开始支持front和batch_front两种值,其中front表示默认为前置摄像头单拍模式,batch_front表示默认为前置摄像头连拍模式。(注:用户进入拍照界面仍然可自由切换两种模式)
isSaveToAlbum: 1, // 整型值,0表示拍照时不保存到系统相册,1表示自动保存,默认值是1
success: function (res) {
_this.localIds = res.localIds // 返回选定照片的本地ID列表
if (utils.UA().os.name === 'iOS') { //判断是否为IOS,
// Ios需要通过getLocalImgData把localIds转为Base64
_this.localIds.forEach(localId => {
wx.getLocalImgData({
localId: localId, // 图片的localID
success: function (res) {
_this.dataUrl.push(res.localData) // localData是图片的base64数据,可以用img标签显示
// 如果服务端要求file二进制流,这里是baseData64的,可以我们转成file二进制流
_this.file = _this.dataURLtoBlob(res.localData)
}
})
})
} else {
// 安卓可以直接用localIds
_this.dataUrl = _this.dataUrl.concat(_this.localIds)
}
}
})
})
this.$emit('inputChangeCb', _this.file)
},
function dataURLtoBlob(baseurl) {
let arr = baseurl.split(','),
mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]),
n = bstr.length,
u8arr = new Uint8Array(n);
while (n--) {
u8arr[n] = bstr.charCodeAt(n);
}
return new Blob([u8arr], {
type: mime
});
}