Blobfile = Frontend
Hej
Jag försöker läsa in en img fil och har följt denna guide Blobfile
I devtools i Chrome får jag:
HomeImages -> incommingDataList blob:http://localhost:3001/aed9db79-cea9-43e0-bd77-b76206b1b550
HomeImages:1 Not allowed to load local resource: blob:http://localhost:3001/aed9db79-cea9-43e0-bd77-b76206b1b550
Då jag tittar på elementet får jag:
<img src="blob:http://localhost:3001/9c2d00c7-e0ed-44bb-a131-65b8f5dbb674" alt="erge">
Men bilden är en fejkikon bara med den alternativa texten erge?
Försöker getta filen från min bakend Får då -->
Cannot GET /8e359986-735d-4c51-9767-6b1525f8abcd
Koden för min backend är:
// Creates a Express server in Node JS and use diff... modules
const express = require('express');
var https = require('https');
var http = require('http');
const app = express();
app.use(express.json());
let cors = require('cors');
app.use(cors());
const fileSystem = require('fs');
//const stream = require('stream')
// Module for handle the user logins
//let jwt = require('jsonwebtoken');
const path = require('path');
//Config for the backend
const backConfig = require('./backConfig.json');
// The server information
const port = backConfig.serverPort;
// MYSQL module for connection
//var mysql = require('mysql');
/* https.createServer({
key: fileSystem.readFileSync('Backend/server.key'),
cert: fileSystem.readFileSync('Backend/server.cert')
}, app) */
app.listen(port, () => console.log(`MediaVisare is listening on port ${port}!`));
const directoryPath = path.join('./Images/', 'hej.jpg');
let imgRootDirectory = '/Images/';
let correctFolderName = directoryPath.replace('\\', '/').replace('Backend/', '');
console.log("correctFolderName", correctFolderName)
console.log("directoryPath", directoryPath)
let dataList = [];
let updateDataList = () => {
fileSystem.readdir(directoryPath, function (err, files) {
// Send first time request
/* for (let fileIndex = 0; fileIndex < files.length; fileIndex++) {
let correctFilesName = files[fileIndex];
dataList.push(correctFilesName);
} */
});
}
app.get('/ReqImage', (req, res) => {
updateDataList();
setTimeout(() => {
console.log("updateDataList -> dataList", dataList)
res.status(200).sendFile(`${__dirname}/${directoryPath}`);
//res.set({'Content-Type': 'image/jpg'});
//res.status(200).send(dataList);
/* const r = fileSystem.createReadStream(imgRootDirectory) // or any other way to get a readable stream
const ps = new stream.PassThrough() // <---- this makes a trick with stream error handling
stream.pipeline(
r,
ps, // <---- this makes a trick with stream error handling
(err) => {
if (err) {
console.log(err) // No such file or any other kind of error
return res.sendStatus(400);
}
})
ps.pipe(res) // <---- this makes a trick with stream error handling */
}, 1000);
//if (err) res.status(500).send(`Fel vid inläsning av bilder: ${err}`);
//listing all files using forEach
//files.forEach((file) => imaffesr
dataList = [];
});
Koden för React komponenten
import React, { useState, useEffect } from 'react';
import {Helmet} from "react-helmet";
import { axiosGetImage } from '../Data/Axios'
import { StyleHomeImages } from '../Style/StyleHomeImages';
import { dataListObj$ } from '../Data/GlobalProps';
let reqToBackend = 1;
export let HomeImages = () => {
const [ incommingDataList, setIncommingDataList ] = useState([]);
const [ fileList, setFileList ] = useState([]);
useEffect(() => {
if (reqToBackend === 1) {
setInterval(() => {
axiosGetImage();
}, 2000);
reqToBackend = 2;
}
dataListObj$.subscribe((dataListObj) => {
console.log("TCL: HomeImages -> folderFileListArr", dataListObj)
console.log("HomeImages -> dataListObj", dataListObj.data);
if (dataListObj) {
if (dataListObj.length === 0) return;
if (dataListObj.data.type !== undefined){
let file = new File( ['img'], dataListObj.data, { type: dataListObj.data.type } );
let imageUrl = URL.createObjectURL(file);
console.log("HomeImages -> imageUrl", imageUrl.replace('3000', '3001'))
setIncommingDataList(imageUrl);
}
}
});
if (incommingDataList === undefined || incommingDataList === []) return;
},[] );
let sortDataList = (item, index) => {
/* let pushtoFileList = [...fileList ];
if ( item.includes('.')) {
pushtoFileList.push(item);
setFileList(pushtoFileList);
}
*/
};
let checkIncomingDataList = (incommingData) => {
}
console.log("HomeImages -> incommingDataList", incommingDataList);
return (
<StyleHomeImages.container>
<Helmet>
<meta charSet="utf-8" />
<title>MediaVisare - HomeImages</title>
</Helmet>
<aside >
Bilder:
<StyleHomeImages.folderFilePath>
<img src={ incommingDataList } alt="erge" //width="60"
/>
{/* {(incommingDataList !== [])
? incommingDataList.map((item, index) => {
console.log("TCL: HomeImages -> item", item)
return(
<StyleHomeImages.iconMeasurement key={ index }>
<img src={`http://localhost:3001/${item}`} alt="erge" width="60"/>
</StyleHomeImages.iconMeasurement>
);
})
: 'rvd'
} */}
</StyleHomeImages.folderFilePath>
</aside>
<main id="appBody__mainContent">
</main>
<footer id="actionBtnContainer">
</footer>
</StyleHomeImages.container>
);
}
Mvh Fredrik
Computer: Windows 10, 64-bit, Intel i9 - 10850K, Asus Rog MAXIMUS XII HERO (WI-FI), 32GB RAM, Asus RTX3070
Game control: Home Cockpit, Keyboard, Saitek Pro Flight X-56 Rhino H.O.T.A.S.