0
152
ViewsDar acceso a archivos locales al servidor web
Recién comencé a aprender JavaScript y he estado tratando de cargar un archivo en un servidor web que estoy alojando localmente. Estoy usando un archivo JS de paquete web para iniciar el servidor y el comando "npm run dev", pero creo que algo está mal configurado porque no puedo cargar archivos locales en el servidor web. Sé que Google Chrome tiene esa función de seguridad que le impide acceder a los archivos locales, pero ejecuté Chrome con los argumentos necesarios para deshabilitar esa función de seguridad, pero no funcionó, así que supongo que es mi servidor. Esto es lo que estoy tratando de hacer:
let uploadFile = document.createElement("input"); uploadFile.type = "file" uploadFile.id = "inputFile" uploadFile.innerText = "Upload File" document.body.appendChild(uploadFile) let fake_path uploadFile.onchange = function () { fake_path = uploadFile.value alert(fake_path) const loader = new GLTFLoader(); loader.load( fake_path, function ( gltf ) { scene.add( gltf.scene ); }, undefined, function ( error ) { console.error( error ); } ); };`Este es mi archivo común de paquete web:
const path = require('path'); module.exports = { entry: './src/client/client.ts', module: { rules: [ { test: /\.tsx?$/, use: 'ts-loader', exclude: /node_modules/, }, { test: /\.(glb)$/i, type: 'src/client/', }, ], }, resolve: { alias: { three: path.resolve('./node_modules/three') }, extensions: ['.tsx', '.ts', '.js', '.glb'], }, output: { filename: 'bundle.js', path: path.resolve(__dirname, '../../dist/client'), } };Y este es mi archivo Dev:
const { merge } = require('webpack-merge') const common = require('./webpack.common.js') const path = require('path'); module.exports = merge(common, { mode: 'development', devtool: 'eval-source-map', devServer: { static: { directory: path.join(__dirname, '../../dist/client/'), }, hot: true, }, }) ¿Estoy haciendo algo mal o por qué no puedo acceder a un archivo local? Este es el error que me da Chrome: 
La ayuda sería muy apreciada.
1 answers
Answer question0
Parece que estás operando bajo varios malentendidos diferentes aquí. Estos son los hechos que los contradicen:
- El servidor de desarrollo de Webpack no admite la carga de archivos.
- Mientras usa una entrada de archivo para permitir que el usuario seleccione un archivo local, no está haciendo nada para intentar cargarlo en el servidor
- El
valuede una entrada de archivo solo es útil para decirle al usuario el nombre del archivo, está tratando de usarlo como una URL (que el servidor de desarrollo del paquete web no puede resolver para nada útil)
Debe pasar una URL real a loader.load . No el fake_path que obtienes del value de una entrada de archivo.
Puede usar FileReader para leer el archivo y crear una URL de esquema de data: a partir de él. Esta entrada de blog explica cómo .
<input type="file" /> <script> // Get a reference to the file input const fileInput = document.querySelector('input'); // Listen for the change event so we can capture the file fileInput.addEventListener('change', (e) => { // Get a reference to the file const file = e.target.files[0]; // Encode the file using the FileReader API const reader = new FileReader(); reader.onloadend = () => { console.log(reader.result); // Logs data:<type>;base64,wL2dvYWwgbW9yZ... }; reader.readAsDataURL(file); }); </script>
Luego debe reemplazar console.log(reader.result); con su llamada a loader.load (reemplazando fake_path con reader.result ).