Estoy tratando de obtener una lista de todos los nombres de archivo en un directorio y luego imprimirlo en una página HTML. Como planeo usar esto para una página HTML, uso browserify para agrupar mi código de secuencia de comandos para poder usar la función "requerir".
El script que estoy ejecutando se muestra a continuación:
let box = document.getElementById("displayhere"); var fs = require('fs'); let pathname = "./ElementImages"; var files = fs.readdirSync(pathname); box.innerHTML = files;Cuando lo ejecuto, aparece un mensaje de error que dice : Error de tipo no detectado: fs.readdirSync no es una función . ¿Hay alguna forma de arreglar esto?
No, no se puede arreglar. Browserify le permite hacer que los módulos estén disponibles en el navegador que no dependen de los módulos principales proporcionados por el nodo cuando se ejecuta como un archivo ejecutable . El acceso al sistema de archivos mediante el módulo fs es uno de esos módulos principales.
Si bien quizás podría probar el borrador de File API en HTML del lado del cliente, necesitaría la interacción del usuario para seleccionar un directorio de un selector y servir la página usando https 1 , que si está ejecutando un nodo en una red de máquina local, puede requerir crear un certificado de seguridad sin firmar utilizando openSSL . Sin embargo, si sigue esta ruta, el usuario deberá aceptar un certificado de seguridad sin firmar, así como elegir correctamente el directorio de imágenes, así como usar un navegador que admita la API de archivos aún no estandarizada.
1 Actualización con agradecimiento al comentario de @connexo
La documentación showDirectoryPicker actualmente establece
Esta función solo está disponible en contextos seguros (HTTPS)
Sin embargo, localHost está siendo tratado como un "contexto seguro" en este sentido por los navegadores basados en Chromium. Por lo tanto, no es necesario crear un certificado de seguridad y ejecutar un servidor localHost usando HTTPS para los navegadores compatibles (tenga en cuenta que Firefox aún no ha implementado la API de archivos).
Además, un selector de directorio no se puede abrir mediante programación en JavaScript sin la interacción del usuario a través de un evento de clic o gesto con la mano. Algunos códigos de prueba para intentar abrir un selector de directorios en varios contextos de navegación (no funciona en documentos de espacio aislado):
<!DOCTYPE html> <html><head><meta charset="utf-8"> <title>Dir Picker</title> </script> </head> <body> <button type="button" onclick="pick()">Show Directory Picker</button><br> Did a directory picker open automatically? - See console if not. <script>"use strict"; async function getDir() { const dirHandle = await window.showDirectoryPicker(); // console.log(dirHandle); } const pick= ()=> { getDir() .then(()=>console.log("Picker opened!")) .catch(err=>console.error("Failed to open picker from inline script:\n" + err.message + "\nuserAgent: " + navigator.userAgent)); } pick(); // automatic attempt </script> </body> </html>Aunque la publicación no cubre los detalles de cómo se crea la página HTML, los resultados obtenidos se utilizarán en otra página HTML. Dependiendo de la infraestructura en uso, podría
generar la lista de directorios en node. Si necesita servirlo como una página HTML, cree una página HTML en el servidor para hacerlo.
genere la lista manualmente en una terminal usando los comandos ls o dir , según el sistema operativo, dirija la salida a un archivo y procese los resultados por texto.