Question

我正在使用NodeJS来从我的views目录中提供文件（没有快递）。我正在关注应用程序，服务器，路由器，处理程序结构，处理程序几乎拥有所有代码。

这是handler.js的代码：

const fs = require('fs'),
path = require('path'),
formidable = require('formidable');

function handle(pathname, method, viewDir, response){
    let filePath;
    console.log(pathname);
    if(pathname==='/'){
        pathname = '/main.html';
    }

    if(pathname==='/favicon.ico'){
        debugger;
        response.end();
    }
    else{
        filePath = viewDir + pathname;
        //fileext = pathname.substr(pathname.lastIndexOf('.')+1);   
        fileExt = path.extname(pathname);
        console.log(filePath+'\n'+fileExt);
        if(fileExt!==''){
            fs.readFile(filePath, function(err,data){
                if(err){
                    response.writeHead(400, {'Content-Type': 'text/html'});
                    response.end('<h1>Error reading file!</h1>');
                }
                if(data){
                    debugger;
                    // console.log({'Content-Type': 'text/' + fileExt.substr(1)=='js'?'javascript':fileExt.substr(1)});
                    let mimeType = 'text/' + (fileExt.substr(1)=='js'?'javascript':fileExt.substr(1));
                    console.log(mimeType);
                    response.writeHead(200, {'Content-Type': mimeType});
                    response.write(data);
                    response.end();
                }
            });
        }   
        else if(pathname==='/upload' && method.toLowerCase()==='post'){
            //some formidable code here
            response.end();
        }
        else{
            response.writeHead(404, {'Content-Type': 'text/html'});
            response.end('<h1>404 File not found!</h1>');
        }
    }

}

    exports.handle = handle;

这是main.html：

    <!DOCTYPE html>
<html>
<head>
    <title>Caption generator for images</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link rel="stylesheet" type="text/css" href="./main.css"></link>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
</head>
<body>
    <div class="jumbotron">
        <h1>Caption generator for images</h1>
        <h3>Generates a list of captions appropriate for your uploaded picture by visual recognition.</h3>
    </div>
    <div class="container">
        <div class="page-header">
            <h1>Upload image</h1>
        </div>
        <form enctype="multipart/form-data">
            <div class="form-group">
                <label for="imageInputFile">Image input</label>
                <input id="image-input-file" type="file" class="form-control-file" name="image-input-file" aria-describedby="fileHelp" accept="image/*">
                <small id="fileHelp" class="form-text text-muted">Upload an image file or use already uploaded image.</small>
            </div>
            <button type="submit" id="file_submit" class="btn btn-primary">Submit</button>
        </form>
    </div>
    <script type="text/javascript" src="main.js"></script>
</body>
</html>

现在，如果我从main.html删除最后一个脚本标记，一切都很好，但是如果它现在我的main.css文件得到了mime-type text / javascript。

我没看到什么？

我还看到两个文本/ javascript被记录，并且它们都在main.js被提供之后。如果我在我的脚本标记之后剪切并粘贴了main.css的链接标记，它们都将作为text / css提供。

这与我的fileExt是一个全局变量有关吗？

Answer 1

我认为您在ServerSide和ClientSide之间的路径之间存在混淆。在你的HTML中，css是./main.css，但对于你直接使用main.js的JS

我没有完整的项目来检查正在加载的文件夹/ URL。

有没有理由不使用ExpressJS？例如，如果您的目录如下：

app/
app/index.js
app/public/{here your css, main}

在index.js中你只需要

const express = require('express');
const app = express();

app.use('/', express.static('public'));

app.listen(3000, function () {
  console.log('Example app listening on port 3000!')
});

Answer 2

我未能声明变量fileExt。我的坏！

let fileExt;

在声明路径名变量之后或在＆＃34; fileExt＆＃34;之前的任何地方插入上述语句首先用于解决问题。

从NodeJS提供静态文件时出现奇怪的mime类型覆盖问题

2 个答案: