Question

我有一个要填充一些文件图像和href的列表，现在我可以检索目录中的内容，但不能检索路径，因此图像和href不能正常工作

const fs = require('fs');

let thumbDirectory = "./video/local/thumbnails";
let dirBuffer= Buffer.from(thumbDirectory);

let videoDirectory = "./video/local";
let dirVidBuffer= Buffer.from(videoDirectory);

let videos = []
videos = fs.readdirSync(videoDirectory);

let files = []
files = fs.readdirSync(thumbDirectory);



function displayLocalFiles(thumbFiles, videoFiles) {
    console.log('local button!');
    var fileList = document.getElementById('video-list');
    var vid = document.getElementById('video-placeholder');

    for(var i = 0; i < thumbFiles.length; i++){
      for(var v = 0; v < videoFiles.length; v++){
            fileList.innerHTML = document.getElementById('video-list').innerHTML + 
            //Need to link thumnails with videos in order to click on thumbnail and open a video
            `<li class="list-group-item">
                <a href="${(videoFiles[v])}" id= 'video-placeholder' target="_blank">
                    <img src="${(thumbFiles[i])}" alt="thumb" class="thumbnail">
                </a>
                <div>${(thumbFiles[i])}</div>
            </li>`
      }
    };
    //this.addEventListeners();
}


displayLocalFiles(files);

我该如何工作？

Answer 1

您需要在文件url前面加上模式file://和相对路径，因此：

const fs = require("fs");
const thumbDirectory = "./video/local/thumbnails/";
const videoDirectory = "./video/local/";
const videos = fs.readdirSync(videoDirectory).map(file => 'file://' + videoDirectory + file);
const files = fs.readdirSync(thumbDirectory).map(file => 'file://' + thumbDirectory + file);

function displayLocalFiles(thumbFiles, videoFiles) {
    console.log("local button!");
    const fileList = document.getElementById("video-list");
    const vid = document.getElementById("video-placeholder");
    for (let i = 0; i < thumbFiles.length; i++) {
        for (let v = 0; v < videoFiles.length; v++) {
            fileList.innerHTML = document.getElementById("video-list").innerHTML + 
                //Need to link thumnails with videos in order to click on thumbnail and open a video
                `<li class="list-group-item">
                <a href="${(videoFiles[v])}" id= 'video-placeholder' target="_blank">
                    <img src="${(thumbFiles[i])}" alt="thumb" class="thumbnail">
                </a>
                <div>${(thumbFiles[i])}</div>
            </li>`;
        }
    }
}

displayLocalFiles(files, videos);

获取文件路径fom文件js

1 个答案: