微信授权调用相机、相册、直接上传阿里云

阿里云授权

const client = new OSS({

  accessKeyId: "******",

  accessKeySecret: "********",

  bucket: "***",

  endpoint: "域名",

  region: "**",

  secure: true

});

1、授权微信

Vue history 路由模式授权微信需要接口地址后面直接拼接encodeURIComponent(location.herf)

Vue hash 路由模式授权微信需要在接口地址后面进行encodeURIComponent(location.href.split('#')[0])否则会出现你在开发者工具里面什么都是好用的,但是到了真机测试的时候就全是羊驼了。。。

授权接口方法

getWxsdk({}).then((res)=>{

    if(res.code == 200 ){

          this.$wechat.config({

              debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。

              appId: res.data.appId, // 必填,公众号的唯一标识

              timestamp: parseInt(res.data.timestamp), // 必填,生成签名的时间戳

              nonceStr: res.data.nonceStr, // 必填

              signature: res.data.signature, // 必填

              jsApiList:res.data.jsApiList

          })

        }

      })

    // 选择图片

    chooseImage(){

      let self = this;

      self.$wechat.chooseImage({

            count: 9, // 默认9

            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图,默认二者都有

            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有

            success(res) {

                self.localIds = res.localIds; // 返回选定照片的本地ID列表,localId可以作为img标签的src属性显示图片

                self.syncUpload(self.localIds);

            }

          });

    },

如何前端直接上传阿里云

syncUpload(localIds){

      let newlocalId = localIds.pop();

      var self = this;

    //获取图片

      self.$wechat.getLocalImgData({

        localId: newlocalId, // 图片的localID

        success: (res)=> {

          var localData = res.localData; // localData是图片的base64数据,可以用img标签显示

          if(localData.indexOf('data:image'!==0)){

            localData = 'data:image/jpeg;base64,'+ localData

          }

          localData = localData.replace(/\r|\n/g,'').replace('data:image/jpg', 'data:image/jpeg');

          const blob = this.dataURLtoBlob(localData);

          // blob转arrayBuffer

          const reader = new FileReader();

          reader.readAsArrayBuffer(blob);

          reader.onload = event => {

            // arrayBuffer转Buffer

            const buffer =  self.toBuffer(event.target.result);

            client.put(`recordentry/${Math.random()*10}xixi.png`, buffer).then(response => {

                if(response.res.status === 200){

                  self.imgListArr.push(response.res.requestUrls[0]);

                }else{

                  self.$toast('上传失败,请重新上传');

                }

              })

              .catch(err => {

                console.log(err);

              });

            }

          if(localIds.length > 0){

            self.syncUpload(localIds);

          }

        }

      })

    },

    //ArrayBuffer ---> Buffer

      toBuffer(ab) {

          var buf = new Buffer(ab.byteLength);

          var view = new Uint8Array(ab);

          for (var i = 0; i < buf.length; ++i) {

              buf[i] = view[i];

          }

          return buf;

      },

      // 判断机型

    IsAndroid() {

      var u = navigator.userAgent;

      var isandroid = u.toLocaleLowerCase().indexOf('android') > -1 || u.toLocaleLowerCase().indexOf('adr') > -1;

        if (isandroid) {

          return true;//android(安卓手机)

        } else {

          return false;//ios(苹果手机)

        }

    },

    // base64转blob

    dataURLtoBlob(dataurl) {

        var arr = dataurl.split(',');

        var mime = arr[0].match(/:(.*?);/)[1];

        if(this.IsAndroid()){

          var newImg = arr[1].replace(/^data:image\/(png|jpeg|jpg);base64,/,'');//一定要判断系统类型、一定要判断系统类型、一定要判断系统类型

          var bstr = atob(newImg);

        }else{

          var bstr = atob(arr[2]);

        }

        var n = bstr.length;

        var u8arr = new Uint8Array(n);

        while (n--) {

            u8arr[n] = bstr.charCodeAt(n);

        }

        return new Blob([u8arr], { type: mime });

    },

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,651评论 6 501
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,468评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,931评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,218评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,234评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,198评论 1 299
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,084评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,926评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,341评论 1 311
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,563评论 2 333
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,731评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,430评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,036评论 3 326
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,676评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,829评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,743评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,629评论 2 354

推荐阅读更多精彩内容