Estoy trabajando en una aplicación de chat en tiempo real y quiero permitir que los usuarios carguen sus propias imágenes para usarlas como avatares. Cuando un usuario carga una imagen, el backend muestra la siguiente URL: file:///C:/fakepath/016CF4E2-65C6-46E1-8C5C-415E74970948.jpeg. Sin embargo, cuando inicio sesión en la aplicación y reviso la consola, aparece el siguiente mensaje: No se permite cargar el recurso local: file:///C:/fakepath/016CF4E2-65C6-46E1-8C5C-415E74970948.jpeg . Estaba probando, y luego decidí cambiar el tipo de entrada de archivo a URL, y luego pegué la dirección aleatoria de una imagen de Google, y luego, cuando la volví a cargar en la aplicación, la imagen había desaparecido. ¿Hay alguna forma de permitir que se muestren las imágenes cargadas por el usuario? Estoy usando la API de chat de transmisión si eso también ayuda, así como Heroku y nodejs.
Mantenga la entrada como type="file" . El usuario está seleccionando un archivo de su disco. No tendrá una URL.
fakepath proviene de intentar tratar la entrada del archivo como una cadena en lugar de como un archivo. Si usa JavaScript, no use la propiedad de value del campo, ya que solo es útil con fines informativos y de depuración. Si está enviando un formulario, debe poder manejar entradas de archivos (y el enctype predeterminado no lo hace).
Sube la imagen a un servidor. La forma en que haga esto depende de su enfoque, si es con un formulario, entonces el atributo enctype debe establecerse en multipart/form-data , si es con Ajax, entonces debe comenzar con un objeto FormData .
En el servidor, analice la solicitud (los detalles dependen del entorno del lado del servidor) y guarde el archivo en algún lugar.
Asigne una URL al archivo (ya sea guardándolo en un lugar desde el que se sirven los archivos estáticos o haciendo que otro proceso del lado del servidor lea el archivo (desde donde lo guardó) a pedido).