
<template>
  <div>
     <h1>图片上传</h1>
    <img :src="imgURL" style="width: 90px;height: 90px" @click="addVipImage()" alt="点击上传图片"/>
  </div>
</template>
<script>
export default {
  data() {
    return {
      URL: "",
      serverPrefix: "后台获取微信参数的接口地址?url=",
      imgURL: "",
      defaultUrl:"../../../assets/userRegister/people-name.png",
      serverId:""
    };
  },
  methods: {
    wxConfig() {
    let clientUrl = '';
    // let ua = navigator.userAgent.toLowerCase();


    let u = navigator.userAgent;
    let isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //g
    let isIOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
    if (isAndroid) {
      //这个是安卓操作系统
      console.log('机型：android');
      clientUrl = location.href
    }
    if (isIOS) {
    　　//这个是ios操作系统
        console.log('机型：ios');
        clientUrl = encodeURIComponent(location.href.split('#')[0]);
    }
      // let clientUrl = encodeURIComponent(location.href);
      // let url = $config.rootPath + '/js/sdk/getWxConfig?wxCode=' + $config.wxCode + '&clientUrl=' + clientUrl
      let url = process.env.basePathRl + "getSignature";
      let param = {
        apiKey: "handexinxi",
        url: clientUrl
      };
      hlsHttp.post(url, param).then(function(res) {
        wx.config({
          beta: true,
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
          appId: res.result.appId, // 必填，公众号的唯一标识
          timestamp: res.result.timestamp, // 必填，生成签名的时间戳
          nonceStr: res.result.nonceStr, // 必填，生成签名的随机串
          signature: res.result.signature, // 必填，签名，见附录1
          jsApiList: [
            "chooseImage",
            "previewImage",
            "downloadImage",
            "getLocalImgData",
            "uploadImage"
          ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
        });
      });
    },
    addVipImage: function() {
      let self = this;
      wx.chooseImage({
        count: 1, //张数， 默认9
        sizeType: ["compressed"], //建议压缩图
        sourceType: ["album", "camera"], // 来源是相册、相机
        success: function(res) {
          self.imgURL = res.localIds[0];
          self.uploadToWeixinServer(res.localIds[0]);
        }
      });
    },
    //预览图片
    previewImage(currentImg) {
      let _this = this;
      wx.previewImage({
        current: currentImg, //当前图片
        urls: _this.saveImages.previewImageList
      });
    },
    //删除图片，数据库里没删除
    // remove(index) {
    //   this.$emit("removed", index);
    //   this.saveImages.saveImageList.splice(index, 1);
    //   this.saveImages.previewImageList.splice(index, 1);
    //   this.saveImages.previewThumbList.splice(index, 1);
    // },
    uploadToWeixinServer(localId) {
      let self = this;

      wx.uploadImage({
        localId: localId,
        isShowProgressTips: 1, // 默认为1，显示进度提示
        success: function(res) {
          //res.serverId 返回图片的微信服务器端ID
          console.log('上传图片后返回的信息',res)
          self.serverId = res.serverId;

        }
      });
    }
  },
  created() {
    this.wxConfig();
  }
};
</script>
<style scoped>
</style>
