app内嵌H5页面 上传图片，调用app的方法和注册回调

html

 <!-- app的展示唤起app的相机 -->
          <span  class="file-inp" @click.stop="changeImageApp" ></span>
         

js

import { InitBridge, setupWebViewJavascriptBridge } from "@/utils/common";
  mounted() {
    //注册上传事件
    window.AppUpLoadFile = this.AppUpLoadFile;
    if (isAndroid) {
    } else {
      setupWebViewJavascriptBridge((bridge) => {
        bridge.registerHandler("AppUpLoadFile", this.AppUpLoadFile);
      });
    }
}
 // 手机app部分上传图片
    changeImageApp() {
      console.log('app方法调用')
      if (isAndroid) {
        InitBridge((bridge) => {
          bridge.uploadImageMethod(3);
        });
      } else {
        setupWebViewJavascriptBridge((bridge) => {
          bridge.callHandler("uploadNativeImageMethod", { type: 3, count: 1 }, () => {});
        });
      }
    },




    //app上传图片糊回调
    AppUpLoadFile(str) {
      // alert(str);
      this.imgIsLoading = true;
      const index = str.indexOf(",");
      const progress =str.substring(0, index);
      const path = str.substring(index + 1, str.length);
      // alert(path + "图片地址");
      //上传前
      if (progress == "beforeupload") {
        //console.log('beforeupload');
      }
      //上传中
      else if (progress == "uploading") {
        //console.log('uploading');
      }
      //上传成功
      else if (progress == "success") {
        this.imageUrls.push(path);
        this.imgIsLoading = false;
      }
      //上传出错
      else if (progress == "error") {
        this.imgIsLoading = false;
        Toast("上传失败，请重试");
      }
    },

common.js

// 与app交互
export const InitBridge = function (callback) {
	try {
		if (getAppType() === 'ios') {
			// 建立IOS桥接
			var onBridgeReady = function (bridge) {
				if (callback) {
					callback(bridge);
				}
			}
			if (window.WebViewJavascriptBridge) {
				onBridgeReady(WebViewJavascriptBridge);
			} else {
				if (document.addEventListener) {
					document.addEventListener('WebViewJavascriptBridgeReady', function () {
						onBridgeReady(WebViewJavascriptBridge);
					}, false);
				} else {
					document.attachEvent('onWebViewJavascriptBridgeReady', function () {
						onBridgeReady(WebViewJavascriptBridge);
					});
				}
			}
		} else {
			// bridge = manjdSales;
			if (callback) {
				callback(manjdSales);
			}
		}
	} catch (e) { };
};

export const setupWebViewJavascriptBridge = function (callback) {
	// 使用navigator.userAgent.toLowerCase()判断登陆端是pc还是手机
	let ua = window.navigator.userAgent.toLowerCase();
	// console.log(ua)
	let vs = ua.match(/iOS-\d*/);
	// console.log(vs)
	let vn = null
	if(vs){
		vn = vs.split('-')[1]
	}
	if (vn < 163) {
		InitBridge() 
	}
	// console.log(window.WebViewJavascriptBridge)
	if (window.WebViewJavascriptBridge) { return callback(WebViewJavascriptBridge); }
	if (window.WVJBCallbacks) { return window.WVJBCallbacks.push(callback); }
	window.WVJBCallbacks = [callback];
	var WVJBIframe = document.createElement('iframe');
	WVJBIframe.style.display = 'none';
	WVJBIframe.src = 'https://__bridge_loaded__';
	document.documentElement.appendChild(WVJBIframe);
	setTimeout(function() { document.documentElement.removeChild(WVJBIframe) }, 0)
}