美文网首页
企业微信选择图片JS-SKD

企业微信选择图片JS-SKD

作者: 努力study代码的小哪吒 | 来源:发表于2022-04-06 17:24 被阅读0次
    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
        });
    }
    
    

    相关文章

      网友评论

          本文标题:企业微信选择图片JS-SKD

          本文链接:https://www.haomeiwen.com/subject/xpulrrtx.html