Red de conocimiento informático - Problemas con los teléfonos móviles - reaccionar - encapsular el componente de carga

reaccionar - encapsular el componente de carga

Mi proyecto está lleno de muchas cargas de video, audio e imágenes, por lo que en este caso, encapsular estos componentes en un componente y pasar alguna configuración al usarlo es una forma muy eficiente de trabajar.

Crear un nuevo cargar archivo

La configuración proviene del componente principal y el componente realizará algún procesamiento según los parámetros en la configuración

upBtnRef es un componente de botón en el componente de carga antd. p>

upBtnRef es un componente de botón en el componente de carga antd. Su estilo es muy problemático, así que lo configuro en visibilidad: oculto" y luego registro la referencia a través de referencia para activar la carga.

La intención original de crear fakeUpBtnRef es proporcionar una interfaz para que el componente principal llame a la carga, de modo que el componente principal pueda personalizar fácilmente su propio estilo y luego activarlo en nuestro componente de carga. componente principal en useEffect. la referencia del componente

es predeterminada, luego el usuario realizará el reemplazo del identificador de imagen antes y después de la carga.

actUrls mantendrá el identificador de imagen para cada activación de componente, cuando se utilice la carga. en el mismo componente Esto es útil cuando se trabaja con listas

Una declaración de cambio establecerá los tipos de archivos seleccionables según el tipo de carga

Una declaración de cambio establecerá los tipos de archivos seleccionables según el el tipo de carga

La declaración de cambio establecerá el tipo de archivo seleccionable de acuerdo con el tipo de carga. getBase64 convertirá la imagen que cargamos en un formulario visualizable

onUploadChange monitoreará el progreso de nuestro. cargar, porque solo la imagen es convertible, dado que solo se pueden convertir imágenes, solo necesita cambiar los íconos de activación de audio y video

getActImgUrl se usa para obtener el ícono de activación de cada componente en la imagen. list

getActUrls se usa para obtener la lista de imágenes. El ícono de activación de cada componente en la lista de imágenes.

getActUrl se usa para obtener el ícono de activación de cada componente en la lista de imágenes. se utiliza para obtener la dirección de imagen de cada componente en la lista de imágenes.

La página final es la siguiente

Uso

.