企业微信选择图片JS-SKD

2022-04-06  本文已影响0人  努力study代码的小哪吒
  1. 开发功能
    点击选择图片,然后可以单选可进行多选,使用企业微信SDK开发
  2. 代码
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
    });
}

上一篇下一篇

猜你喜欢

热点阅读