Node.js 在使用节点服务器时，如何在html中使用绝对路径
我正在nodeJS中开发一个音乐应用程序。 我想将音频标记src属性更改为节点应用程序工作目录之外的文件。我从服务器接收到正确的Absolute路径，但更改时的路径在localhost:3000/path上发送get请求，这不是我想要的 我该怎么做有什么建议吗 编辑。。 下面是代码片段 这是我从变量中的指定文件夹收集文件的主要路径，该变量位于node app目录之外，完全可以正常工作Node.js 在使用节点服务器时，如何在html中使用绝对路径,node.js,express,path,Node.js,Express,Path,我正在nodeJS中开发一个音乐应用程序。 我想将音频标记src属性更改为节点应用程序工作目录之外的文件。我从服务器接收到正确的Absolute路径，但更改时的路径在localhost:3000/path上发送get请求，这不是我想要的 我该怎么做有什么建议吗 编辑。。 下面是代码片段 这是我从变量中的指定文件夹收集文件的主要路径，该变量位于node app目录之外，完全可以正常工作 router.get('/', function(req, res) { var fileList = [];
router.get('/', function(req, res) {
var fileList = [];
global.song_list = [];
var counter = 0;
var i = 0;
fs.readdir(testFolder, (err, files) => {
if (err) console.log(err);
else {
fileList = files;
}
console.log(fileList.length);
fileList.forEach(function(i){
var fileh = (testFolder + i);
var readableStream = fs.createReadStream(fileh);
var parser = mm(readableStream, function(err, metadata) {
counter++;
// console.log(counter);
if (err) {
console.log(err);
readableStream.close();
} else {
readableStream.close();
var o = {}
o.path = testFolder + i;
o.title = metadata.title;
o.artist = metadata.artist.join(',');
o.album = metadata.album;
var image = metadata.picture;
// console.log(image[0].data)
var base64String = '';
if (image) {
// for (var i = 0; i < image[0].data.length; i++{
// base64String +=
String.fromCharCode(image[0].data[i]);
// }
base64String = new
Buffer(image[0].data).toString('base64');
//console.log(base64String);
} else {
base64String = '/images/none.png';
}
o.image = base64String;
global.song_list.push(o);
// console.log('----------');
// console.log(fileList[fileList.length-1]);
// console.log('----------');
// console.log(fileList.length-1);
if(counter == fileList.length){
console.log('complete');
res.render("index",
{list:global.song_list.slice(0,200)});
}
}
});
});
// var id3 = id3.fetch(testFolder+file_list[0]);
// res.send(id3);
});
});
<!DOCTYPE html>
<html>
<head>
<title>Music</title>
<script type="text/javascript" src="/js/jquery-3.2.1.min.js">
</script>
<script type="text/javascript" src="/js/materialize.min.js"></script>
<script src = "https://code.jquery.com/ui/1.10.4/jquery-ui.js">
</script>
<link href = "https://code.jquery.com/ui/1.10.4/themes/ui-
lightness/jquery-ui.css"
rel = "stylesheet">
<link rel="stylesheet" type="text/css"
href="/css/materialize.min.css">
<link rel="stylesheet" type="text/css" href="/css/style.css">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
</head>
<body>
<div id="background">
<img id="bg_img" src="/images/bg.png">
</div>
<div id="music_player">
<div id="nav_flex_container">
</div>
<div id="window">
<table>
<thead >
<th>Title</th>
<th>Album</th>
<th>Artist</th>
</thead>
<tbody>
<% for(var i=0;i<list.length;i++){%>
<tr>
<td class="title"><span class="list_span"
style="display: inline-block;"><%= list[i].title %><span></td>
<td><%= list[i].album %></td>
<td><%= list[i].artist %></td>
</tr>
<%}%>
</tbody>
</table>
</div>
<div id="controls_flex_container">
<div id="song_info">
<div id="art_holder">
<img id="art_now_playing" src="/images/none.png"
alt="x">
</div>
<div id="info_holder">
<h6 id="title_now_playing"><strong>Test</strong></h6>
<h6 id="album_now_playing">The Test</h6>
</div>
</div>
<div id="controls">
<div id="playback_buttons">
<audio preload="none" id="audio_player">
<source id="song_source" src="/music/test.mp3">
</audio>
<i class="small material-icons" id="replay"
style="font-size: 22px;">replay_30</i>
<i class="small material-icons" id="previous"
style="font-size: 22px;">skip_previous</i>
<i class="small material-icons"
id="play">play_circle_outline</i>
<i class="small material-icons" id="next"
style="font-size: 22px;">skip_next</i>
<i class="small material-icons" id="forward"
style="font-size: 22px;">forward_30</i>
</div>
<div id="slider">
<h6 id="timeNow"><span>00</span>:<span>00</span></h6>
<div id='progress'>
<div id='progress-bar'></div>
</div>
<h6 id="length"><span>00</span>:<span>00</span></h6>
</div>
</div>
<div id="other_controls">
</div>
</div>
<div id="user_flex_container">
</div>
</div>
<script src="/js/playerControls.js"></script>
<script src="/js/fileReader.js"></script>
<script src="/js/id3-minimized.js"></script>
<script src="/js/id3extractor.js" ></script>
<script>
$(document).ready(function(){
// $('#nav_flex_container').resizable({
// handles: 'n,w,s,e',
// minWidth: 200,
// maxWidth: 300
// });
var width = $(window).width()-410;
var height = $(window).height() -
$("#controls_flex_container").height()-20;
$('#window').css({
'width':width + 'px',
'height': height+'px'
});
var obj = document.getElementsByClassName('list_span');
[].forEach.call(document.getElementsByClassName('list_span'),
function(ele){
ele.addEventListener('click', function(){
console.log(ele.innerHTML.split('<span>')[0]);
songChange(ele.innerHTML.split('<span>')[0]);
});
})
function songChange(song){
$.ajax({
type: "POST",
url: "/",
data: JSON.stringify({song:song}),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data){
if(data[0].status == 'OK'){
// console.log(typeof(data[1]));
console.log(data[1]);
$('#title_now_playing').html(data[1].title);
$('#album_now_playing').html(data[1].album);
$('#art_now_playing').attr('src',"data:image/jpeg;base64," +
data[1].image);
$('#song_source').attr('src', data[1].path);
// $('#play').click();
}else{
alert('failed');
}
},
failure: function(errMsg) {
alert(errMsg);
}
});
}
});
</script>
</body>
router.post('/', function(req, res){
console.log('here');
store = [];
console.log(req.body);
var index = 0;
var found = false;
for(var j=0;j<global.song_list.length;j++){
if(global.song_list[j].title == req.body.song){
index = j;
found = true;
store.push(global.song_list[index]);
break;
}else{
found = false;
}
}
if(store.length!=0 && found==true){
res.send([{'status':'OK'},store[0]]);
}else{
res.send([{'status':'OOPS'}]);
}
});
您能解释一下您是如何实现节点服务器的吗？我建议使用express.js，它包括在节点项目根文件夹之外提供静态文件的功能。以下是文档：您能提供一些有关此问题的代码片段吗？