安卓+vue混合开发,打开安卓相册,图片上传

在router钩子函数中获取到安卓传过来的token值

function getGetToken(call) {
  window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.send(
    'webGetToken'
    , function (responseData) {
      try {

        localStorage.setItem('userToken', JSON.parse(responseData).data.userToken)
        localStorage.setItem('uid', JSON.parse(responseData).data.userId)

      } catch (e) {

      }
      call()
    }
  )
}

router.beforeEach((to, from, next) => {
  if (to.meta && to.meta.openNewWeb) {
    if (window.WebViewJavascriptBridge) {
      // h5页面通过路由进行跳转的时候
      // 安卓环境下执行此方法跳转,否则执行默认
      window.WebViewJavascriptBridge.callHandler('openNewWeb', { 
        statusBarProcessing: false,
        url: location.origin + location.pathname + '#' + to.path
      }, function (responese) {
      })
    } else {

      var u = navigator.userAgent
      if (u.indexOf('Android') > -1 || u.indexOf('Adr') > -1) {

        if (!window.WebViewJavascriptBridge) {
          document.addEventListener('WebViewJavascriptBridgeReady', function () {

            getGetToken(() => {
              next()
            })
          })
        } else {

          getGetToken(() => {
            next()
          })
        }
      } else {
        next()
      }
    }
  }
})

export default router

h5的返回按钮也需要调用安卓的方法

// 关闭页面
export function finishPage() {
    console.log(window.WebViewJavascriptBridge)
    if (window.WebViewJavascriptBridge) {
        window.WebViewJavascriptBridge && window.WebViewJavascriptBridge.callHandler('finishPage', function (data, callback) {
            callback(data)
        })
    } else {
        router.go(-1)
    }
}

上传图片

<script>
methods: {
    // 打开安卓相册
    // key是限制选择的图片数量
    getViewBrige(key) {
      console.log("key" + key);
      window.WebViewJavascriptBridge &&
        window.WebViewJavascriptBridge.callHandler(
          "openCamera",
          { maxSelectNum: "" + key },
          function (data, responseCallback) {
            responseCallback(data);
          }
        );
    },
    getImgList() {
      // 获取到安卓传过来的图片
      // 图片是以base64的形式传过来的,这样才能预览
      window.WebViewJavascriptBridge &&
        window.WebViewJavascriptBridge.registerHandler(
          "cameraResult",
          (data, responseCallback) => {
            // console.log(JSON.parse(data).imgs)
            // 将传过来的图片存起来
            let imgs = JSON.parse(data).imgs;
            for (let i = 0; i < imgs.length; i++) {
              console.log(i);
              let list = {
                url: "",
                status: true,
                id: randomString(6),
              };
              list.url = imgs[i];
              this.fileList.push(list);
            }
          }
        );
    },
},
// 生产随机字符串
randomString(length) {
    const str = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ'
    var result = ''
    for (var i = length; i > 0; --i) { result += str[Math.floor(Math.random() * str.length)] }
    return result
}
</script>

监听传过来的图片进行上传

watch: {
    fileList: {
      handler(val, oldVal) {
        val.forEach((item) => {
          if (item.status == true) {
            this._uploadFile(item);
          }
        });
        console.log(val);
        // 但是这两个值打印出来却都是一样的,因为它们的引用指向同一个对象/数组
      },
      deep: true,
    },
  },
// 上传图片接口
    async _uploadFile(list) {
      const formdata = new FormData();
      formdata.append("File", base64File(list.url, randomString(6) + ".jpg"));
      await uploadFile(formdata)
        .then((res) => {
          let imgsData = {
            id: list.id,
            url: res.re.data,
          };
          if (res.re.status == 1) {
            list.status = false;
            // 保存上传后的地址
            this.uploadImgList.push(imgsData);
          }
          if (res.re.status == 0) {
            list.status = false;
            this.$toast("上传失败,请重新上传");
            this.fileList = this.fileList.filter((item) => {
              return item.id != list.id;
            });
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
// base64转file
export function base64File(dataurl, filename) {
    var arr = dataurl.split(',');
    var mime = arr[0].match(/:(.*?);/)[1]
    var bstr = atob(arr[1]);
    var n = bstr.length;
    var u8arr = new Uint8Array(n)
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
    }
    return new File([u8arr], filename, { type: mime })
}

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值