uniapp carga imágenes en el servidor para obtener una vista previa del enlace de la imagen en línea (mundo real)
La interfaz selecciona archivos locales y los archivos seleccionados se mostrarán en la interfaz para obtener una vista previa. Puede seleccionar cuatro para obtener una vista previa al mismo tiempo.
La idea es la siguiente:
El front-end selecciona imágenes locales en png, jpg y otros formatos, y las transmite al servidor de back-end en formato binario. el back-end procesa las imágenes binarias. Se puede acceder a un enlace del servidor a una imagen en línea devuelta al front-end abriendo el enlace en el navegador. Luego, la interfaz muestra el enlace de esta imagen en la página para obtener una vista previa.
Primero
Echemos un vistazo a la documentación oficial de uniapp:
https://uniapp.dcloud.io/api/media/image?id = elegir imagen
Probablemente así
Primero, quiero escribir una demostración de simulación
1: Primero, utilicé el marco colorUI introducido en el proyecto
En el archivo vue debajo de la página
De esta manera, no es necesario escribir ningún estilo, solo use los escritos.
El efecto es así
Cada vez que selecciones una imagen, se mostrará en la página. Configuré un máximo de cuatro imágenes y utilicé blobs temporales como enlaces de imágenes.
Después de seleccionar la imagen en ChooseImage, escriba una función de devolución de llamada exitosa, agregue un método de carga de imágenes uploadFile a la función de retorno y agregue la URL y otros parámetros al método.
Si la solicitud tiene éxito
, se devolverá el enlace de la imagen
Después de agregar la interfaz, la demostración es la siguiente: