麻烦各位大仙儿给看看，这个地方为啥报错呢？（菜鸟，第一次写nodeJs）
发布于 12 年前 作者 chenxiaochun 40231 次浏览 最后一次编辑是 8 年前 
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("parse done");
		fs.renameSync(files.upload.path, "/tmp/test.png");
		response.writeHead(200, {"Content-type": "text/html"});
		response.write("Received image:<br>");
		response.write("<image src=/show />");
		response.end();
	});
}

上面是代码，下面是报错的信息。我其实就是在按照《nodeJs入门》那本书在做练习，不知道为啥代码敲完之后，它就报这个错。

fs.renameSync(files.upload.path, "/tmp/test.png");
                            ^
TypeError: Cannot read property 'path' of undefined
    at /Users/chenxiaochun/Documents/我的资料/test/nodeJs/requestHandlers.js:36:29
    at IncomingForm.<anonymous> (/Users/chenxiaochun/Documents/我的资料/test/nodeJs/node_modules/formidable/lib/incoming_form.js:118:9)
    at IncomingForm.emit (events.js:67:17)
    at IncomingForm._error (/Users/chenxiaochun/Documents/我的资料/test/nodeJs/node_modules/formidable/lib/incoming_form.js:248:8)
    at IncomingForm.write (/Users/chenxiaochun/Documents/我的资料/test/nodeJs/node_modules/formidable/lib/incoming_form.js:145:10)
    at IncomingMessage.<anonymous> (/Users/chenxiaochun/Documents/我的资料/test/nodeJs/node_modules/formidable/lib/incoming_form.js:95:12)
    at IncomingMessage.emit (events.js:67:17)
    at HTTPParser.onBody (http.js:113:42)
    at Socket.ondata (http.js:1410:22)
    at TCP.onread (net.js:374:27)

我把完整的代码贴出来吧，分为以下几个部分。 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 postData = "";
		var pathname = url.parse(request.url).pathname;
		
		console.log("Request for " + pathname + " received.");
		
		request.setEncoding("utf8");
		
		route(handle, pathname, response, request);
	}
	
	http.createServer(onRequest).listen(8888);
	console.log("Server has started.");
}

exports.start = start;

route.js

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

exports.route = route;

requestHandler.js

var querystring = require("querystring");
var fs = require("fs");
var formidable = require("formidable");

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">'+
    '<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("parse done");
		
		console.log(files);
		
		fs.renameSync(files.upload.path, "/tmp/test.png");
		response.writeHead(200, {"Content-type": "text/html"});
		response.write("Received image:<br>");
		response.write("<image src='/show' />");
		response.end();
	});
}

function show(response, postData){
	console.log("Request handler 'show' was called.");
	fs.readFile("/tmp/test.png", "binary", function(error, file){
		if(error){
			response.writeHead(500, {"Content-type": "text/plain"});	
			response.write(error + "\n");
			response.end();
		}else{
			response.writeHead(200, {"Content-type": "text/plain"});		
			response.write(file, "binary");
			response.end();
		}
	});
}

exports.start = start;
exports.upload = upload;
exports.show = show;
47 回复

Cannot read property ‘path’ of undefined 無法讀取 undefined 的 path 屬性，也就是說 files.upload 是undefined。

是，我现在就是不明白它为啥是undefined？

查看你的request，然后看files，再看你页面上file标签的name是不是对

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">'+
    '<input type="submit" value="Upload file" />'+
    '</form>'+
    '</body>'+
    '</html>';
	
	response.writeHead(200, {"Content-type": "text/html"});	
	response.write(body);
	response.end();
}

您说的是这里吗，应该没问题啊。

你在upload方法里，看下req里有没有files属性，有的话用 var file = req.files.upload;即可取到文件 还有，你使用的express还是connect？

这是加上您说的request.files.upload之后的upload方法：

function upload(response, request){
    	console.log("Request handler 'upload' was called.");
    	
    	var form = new formidable.IncomingForm();
    	
    	console.log("About to parse");
    	**console.log(request.files.upload);**
    	form.parse(request, function(error, fields, files){
    		console.log("parse done");
    		
    		fs.renameSync(files.upload.path, "/tmp/test.png");
    		response.writeHead(200, {"Content-type": "text/html"});
    		response.write("Received image:<br>");
    		response.write("<image src='/show' />");
    		response.end();
    	});
    }

可是，运行之后找不到upload属性，下面是报错信息。

console.log(request.files.upload);
                          ^
TypeError: Cannot read property 'upload' of undefined
    at Object.upload [as /upload] (/Users/chenxiaochun/Documents/我的资料/test/nodeJs/requestHandlers.js:35:27)
    at route (/Users/chenxiaochun/Documents/我的资料/test/nodeJs/router.js:5:25)
    at Server.onRequest (/Users/chenxiaochun/Documents/我的资料/test/nodeJs/server.js:13:3)
    at Server.emit (events.js:70:17)
    at HTTPParser.onIncoming (http.js:1514:12)
    at HTTPParser.onHeadersComplete (http.js:102:31)
    at Socket.ondata (http.js:1410:22)
    at TCP.onread (net.js:374:27)

我是一个初学者，还不会使用您提到的那两个框架。

@chenxiaochun 呃，这样说好累，你直接用的formidable吧，我试下先

@sumory 呃，是好累，可我也没啥好办法。不过，还是非常感谢哈。。。

这是测试代码：

var formidable = require('formidable');
var http = require('http');
var util = require('util');

http.createServer(function(req, res) {
  if (req.url == '/upload' && req.method.toLowerCase() == 'post') {
    // parse a file upload
    var form = new formidable.IncomingForm();
    form.uploadDir = '/home/tmp';//手动设置默认上传tmp目录，可以通过fs.rename更改
    form.parse(req, function(err, fields, files) {
      res.writeHead(200, {'content-type': 'text/plain'});
      res.write('received upload:\n\n');
      res.end(util.inspect({fields: fields, files: files}));
    });
    return;
  }

  // show a file upload form
  res.writeHead(200, {'content-type': 'text/html'});
  res.end(
    '<form action="/upload" enctype="multipart/form-data" method="post">'+
    '<input type="text" name="title"><br>'+
    '<input type="file" name="upload" multiple="multiple"><br>'+
    '<input type="submit" value="Upload">'+
    '</form>'
  );
}).listen(8080);

然后我上传一个文件后的打印信息是：

received upload:

{ fields: { title: '' },
  files: 
   { upload: 
      { size: 4037,
        path: '/home/tmp/0af01b60359775ed9e02c9384cc93dcc',
        name: 'status.xsd',
        type: 'application/octet-stream',
        hash: false,
        lastModifiedDate: Thu Aug 09 2012 13:46:21 GMT+0800 (CST),
        _writeStream: [Object],
        length: [Getter],
        filename: [Getter],
        mime: [Getter] } } }

想要的信息都有了，你可以通过files.upload取得所有你想要的信息

  1. 非常感谢您能抽时间给我写这个实例，不过，类似您的这个实例我也已经实现了。
  2. 我现在是初学者，不仅仅是想实现这个文件上传的功能，其实我更想知道：我上面自己所写的代码，到底是哪里不对，为什么不对。
  3. 再一次感谢您的帮助。

好吧，用你写的方法，完整代码在此：

var formidable = require('formidable');
var http = require('http');
var util = require('util');
var fs = require('fs');

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("parse done");
        fs.renameSync(files.upload.path, "/home/tmp/test.png");
        console.log(files);
        response.writeHead(200, {"Content-type": "text/html"});
        response.write("Received image:<br>");
        response.write("<image src=/show />");
        response.end();
    });
}

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">'+
    '<input type="submit" value="Upload file" />'+
    '</form>'+
    '</body>'+
    '</html>';

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

http.createServer(function(req, res) {
  if (req.url == '/upload' && req.method.toLowerCase() == 'post') {
    // parse a file upload
    
    upload(res, req);
    /*
    var form = new formidable.IncomingForm();
    form.uploadDir = '/home/tmp';//手动设置默认上传tmp目录，可以通过fs.rename更改
    form.parse(req, function(err, fields, files) {
      res.writeHead(200, {'content-type': 'text/plain'});
      res.write('received upload:\n\n');
      res.end(util.inspect({fields: fields, files: files}));
    });
    return;
    */
  }

  start(res);
  
  /*
  // show a file upload form
  res.writeHead(200, {'content-type': 'text/html'});
  res.end(
    '<form action="/upload" enctype="multipart/form-data" method="post">'+
    '<input type="text" name="title"><br>'+
    '<input type="file" name="upload"><br>'+
    '<input type="submit" value="Upload">'+
    '</form>'
  );
  */
}).listen(8080);

这个例子我也试过了，开始我是在win7上面，也是这样报错，我就有点怀疑是不是中文的原因，然后我开了虚拟机，在Ubuntu里面装了个，整个路径都是英文名，然后顺利运行了。楼主你也试试看看是不是这个原因

我用的是mac，我已经把整个路径都改成了英文，还是报那个错误。-_-!

@chenxiaochun 你们还真不幸。。。

@sumory 初学，很有可能就是一个低级的小错误。

因为你的 function(response,request) 是错误的，而应该是 function(request,response) .

@chenxiaochun console.log(files) 看看

form.parse(request, function(error, fields, files){
.....
}

我发现，这个位置，办理出您写的例子files对象，可以看到以下这堆东西：

{ upload: 
   { size: 63949,
     path: '/tmp/1189fcfbfe44620782b17efb53d23c04',
     name: '1.png',
     type: 'image/png',
     hash: false,
     lastModifiedDate: Fri, 10 Aug 2012 02:48:08 GMT,
     _writeStream: 
      { path: '/tmp/1189fcfbfe44620782b17efb53d23c04',
        fd: 9,
        writable: false,
        flags: 'w',
        encoding: 'binary',
        mode: 438,
        bytesWritten: 63949,
        busy: false,
        _queue: [],
        drainable: true },
     length: [Getter],
     filename: [Getter],
     mime: [Getter] } }

而我写的例子中的files对象仅仅是一个空的{}，因此就造成无法找到path。

@chenxiaochun 不是吧，我不是最后给出了用‘你写的代码’的例子

@chenxiaochun 提交表单的时候，你有没有选择一个文件啊？

@leizongmin -_-!，当然选择了，我选择一个图片，然后点击上传，浏览器给我的返回结果是无法连接到localhost:8888

  1. 仔细看一下，它代码是这样调用的：upload(res, req); 因此不可能是这个错误；

  2. 若真弄反了，出错信息应该是Cannot read property 'files' of undefined而不是Cannot read property 'path' of undefined

@chenxiaochun 刚测试过，没有选择文件，直接点“提交”按钮确实会提示这个出错。

@leizongmin 那如果选择了文件呢？能上传成功，并且显示出来吗？

@sumory 是，您写的例子确实是用了一部分“我的代码”，而且运行起来也是正确的，我一直在拿你写的这段代码和我的代码进行比对，但我实在是看不出来，到底是哪里错了。-_-!!!

@leizongmin 是，我也测试过了，确实不是这个地方的原因。

@guilin 输出了files，它仅仅是一个空的｛｝，不知道为什么。

@chenxiaochun 额滴神那，肯定是有地方错了呗，看看分号啊，参数顺序啊，监听端口啊，formidable版本啊，文件编码啊等等等等。。。

@sumory 哈哈，是。您说的这些地方 ，我也一直在检查，这不是看不出问题所在嘛。如果我的水平让您抓狂了，实在是报歉。

@chenxiaochun 这倒没有。实在不行先放放呗，这段代码都很简单，先用正确的，不用纠结了

@chenxiaochun

Request handler 'upload' was called.
About to parse
Request handler 'start' was called.
parse done
{ upload:
   { size: 71040,
     path: '\\tmp\\d8f69e1c65b5db83acdb1a109603884f',
     name: 'php.ini',
     type: 'application/octet-stream',
     lastModifiedDate: Fri Aug 10 2012 11:47:00 GMT+0800 (中国标准时间),
     _writeStream:
      { path: '\\tmp\\d8f69e1c65b5db83acdb1a109603884f',
        fd: 3,
        writable: false,
        flags: 'w',
        encoding: 'binary',
        mode: 438,
        bytesWritten: 71040,
        busy: false,
        _queue: [],
        _open: [Function],
        drainable: true },
     length: [Getter],
     filename: [Getter],
     mime: [Getter] } }
Request handler 'start' was called.

@sumory 是，你说的有道理。但是心里堵着个疙瘩，实在是不爽。

@chenxiaochun 所以你贴这个代码没有用的，问题不在于这里，而在于files在哪里生成的。

@chenxiaochun 您贴个完整的代码出来看看吧。。。

@chenxiaochun 还有一个可能是你提交表单的HTML代码可能不正确，表单属性必须是enctype="multipart/form-data"才可以上传文件的

@leizongmin 我已经检查了，是这个类型的。

@leizongmin 我已经在上面把完整的源码贴出来了，麻烦您帮忙看一下。

@leizongmin 这是我写的实例的运行结果吗，竟然可以上传成功。

问题解决了：

  1. 在文件server.js中，你不应该用request.setEncoding("utf8");来手动设置字符编码，当你设置了这个之后，会导致formidable解析出错；

  2. 在文件requestHandler.js中，form.parse(request, function(error, fields, files){这里没有判断是否有出错信息error，因为若error不为null，则fileds和files就可能不能得到正确的值；

  3. 这也解释了为什么 @sumory 给出的精简代码能正确运行，而你这一陀代码却会会出错。

这个问题搞了这么久的主要原因就是上面的第二点，以后记住，回调里面记得首先要判断是否有出错信息，若没有判断，后面会引发的一堆莫名奇妙的错误

@leizongmin 老雷牛bi。。。

刚才闲得蛋疼，上楼主所说的《Node入门》（http://www.nodebeginner.org/index-zh-cn.html ）看了一下，人家的代码是这样子的：

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;

本以为是《Node入门》误人子弟，原来那句request.setEncoding("utf8");还是楼主自己加上去的，真是

一行代码引发的悲剧

@leizongmin 两眼热泪啊，感激之情，无以言表。果然是犯了一个愚蠢的错误。-_-!!!

挽楼主尊严哇。

哈哈，，为了debug，可以没有尊严。不过，各位大牛也木有不给尊严啊。

我也是因为马虎啊～～,不过错误地方不一样。 ’<input type=“file” name=“upload” multiple=“multiple”>’（修改后） 提交表单的HTML代码的问题。在win7下完美运行。谢谢各位大牛～～。撒花撒花

遇到了同样的问题，我的原因是没有写 enctype=“multipart/form-data”

回到顶部