Question

我正在按照节点初学者书中的指南进行操作，并设法完成了最后一部分处理文件上传。本书重点介绍JavaScript调用方法，并在必要时使用非常少的HTML作为字符串使用请求和响应。

我的所有console.log语句都显示正确的文件路径。但是，我没有显示图像，而是获得以下HTML行：

我认为问题出在 requestHandlers.js 的这一行：

response.write("<img src='/show' />");

应该在 requestHandlers.js 的底部调用 show function 。查看本文底部的控制台输出，您可以看到执行永远不会进入show函数。源代码和控制台输出如下：

index.js

var server = require("./server");
var router = require("./router");
var requestHandlers = require("./requestHandlers");

var handle = {};
handle["/"] = requestHandlers.start;
handle["/start"] = requestHandlers.start;
handle["/upload"] = requestHandlers.upload;
handle["/show"] = requestHandlers.show;

server.start(router.route, handle);

server.js

var http = require("http");
var url = require("url");

function start(route, handle) {
  function onRequest(request, response) {
    var pathname = url.parse(request.url).pathname;
    console.log("Request for " + pathname + " received.");
    route(handle, pathname, response, request);
  }

  http.createServer(onRequest).listen(8888);
  console.log("Server has started.");
}

exports.start = start;

router.js

function route(handle, pathname, response, request) {
  console.log("About to route a request for " + pathname);
  if (typeof handle[pathname] === 'function') {
    handle[pathname](response, request);
  } else {
    console.log("No request handler found for " + pathname);
    response.writeHead(404, {"Content-Type": "text/plain"});
    response.write("404 Not found");
    response.end();
  }
}

exports.route = route;

requestHandlers.js

var querystring = require("querystring"), 
        fs = require("fs"),
        formidable = require("formidable");
var path = require('path');
var file = path.join(__dirname, 'tmp', "test.png");

function start(response) {
  console.log("Request handler 'start' was called.");

  var body = '<html>'+
      '<head>'+
            '<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />'+
      '</head>'+
          '<body>'+
                '<form action="/upload" enctype="multipart/form-data" method="post">'+
                  '<input type="file" name="upload" multiple="multiple"/>'+
                  '<input type="submit" value="Upload file"/>'+
                '</form>'+
          '</body>'+
    '</html>';

    response.writeHead(200, {"Content-Type": "text/html"});
    response.write(body);
    response.end();
}

function upload(response, request) {
  console.log("Request handler 'upload' was called.");
  var form = new formidable.IncomingForm();
  console.log("about to parse");
  form.parse(request, function(error, fields, files) {
    console.log("parsing done");
    console.log("File = "+file);

    fs.rename(files.upload.path, file,  function (error) {
        if(error) {
            console.log("error");
            fs.unlink(file);
            console.log(file);
            fs.rename(files.upload.path, file);
            console.log(file);
        }
    });
    response.writeHead(200, {"Content-Type": "text/plain"});
    response.write("received image:<br/>");
    response.write("<img src='/show' />");
    response.end();
  });
}

function show(response) {
    console.log("Request handler 'show' was called.");
    response.writeHead(200, {"Content-Type": "image/png"});
    fs.createReadStream(file).pipe(response);
}

exports.start = start;
exports.upload = upload;
exports.show = show;

控制台输出

C:\Users\pdl\Projects\TestSeparateJS>node index.js
Server has started.
Request for / received.
About to route a request for /
Request handler 'start' was called.
Request for /upload received.
About to route a request for /upload
Request handler 'upload' was called.
about to parse
parsing done
File = C:\Users\pdl\Projects\TestSeparateJS\tmp\test.png
error
C:\Users\pdl\Projects\TestSeparateJS\tmp\test.png
C:\Users\pdl\Projects\TestSeparateJS\tmp\test.png

Answer 1

您将内容以纯文本而非HTML格式发送。因此浏览器永远不会将其作为HTML运行。这就是为什么您看到生成<img>文本而不是<img>标记的原因。

在upload功能中更改此内容：

response.writeHead(200, {"Content-Type": "text/plain"});

到此：

response.writeHead(200, {"Content-Type": "text/html"});

NodeJS - 节点初学者书 - 显示函数未被调用

1 个答案: