Las páginas H5 están integradas en Android en el proyecto de la empresa, y las páginas H5 deben seleccionar la función de carga de imágenes. La etiqueta H5 no puede activar las funciones de cámara y galería de Android, por lo que solo puede ser procesada por Android. Lo hice por primera vez, basándome en muchos códigos en Internet, y lo resumí de la siguiente manera:
Usamos WebView para cargar páginas H5 y necesitamos usar WebView para cargar archivos. De forma predeterminada, el uso de WebView de Android no es compatible con la carga de archivos. En este momento, webView necesita configurar WebChromeClient y reescribir algunos métodos, de la siguiente manera:
Introduzca el método anterior:
openFileChooser():系统未暴露的接口，因此不需要加Override的注解，同时不同版本有不同的参数.
参数：
ValueCallback: 选择完文件后，接收文件回调到网页内处理
acceptType：接受的文件mime type。
onShowFileChooser：Android 5.0之后，系统提供了来让我们实现选择文件的方法。
参数：
FileChooserParams：在该参数中，同样包括acceptType。我们可以根据acceptType，来打开系统的或者我们自己创建文件选择器。
Nota:
- Debido a la diferencia entre las diferentes versiones, el tipo de parámetro recibido por onReceiveValue de ValueCallback es Uri para versiones anteriores a Android 5.0, y la matriz Uri se recibe para versiones 5.0 y posteriores. Debe prestar atención al transferir valores.
- Incluso si el resultado obtenido es nulo, se debe pasar a la vista web, es decir, se llama directamente a mUploadMessage.onReceiveValue (null), de lo contrario se bloqueará la página web.
-
Al seleccionar el archivo, se utilizarán los componentes proporcionados por el sistema u otras aplicaciones compatibles. Algunas de las URL devueltas son directamente la URL del archivo y otras son las URL del proveedor de contenido. Por lo tanto, debemos tratarlo de manera unificada. y convertirlo en el uri del archivo.
-
Al abrir el paquete de lanzamiento, debido a que confundiremos, debemos configurar específicamente para no confundir el método openFileChooser en la subclase WebChromeClient. Dado que no es un método heredado, se confundirá de forma predeterminada, y luego el archivo no se puede seleccionar.
El código cuando se llama al front-end H5:
<input capture="camera" class="upload-input" type="file" accept="image/*" οnchange="angular.element(this).scope().img_upload(this.files)"/>
Imagen del efecto: (efecto de ejecución del simulador)
La prueba de la máquina real está bien.
Dirección de descarga de demostración: https://github.com/xufei5789651/UploadH5Demo
Aprenda de la siguiente manera: