nodejs并在上传文件时表达错误，“无法读取未定义的属性”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18480568/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
nodejs and express error when uploading file, "cannot read property of undefined"
提问by Jay
EDIT: === For clarity, I am looking to upload a file to the server, be it a picture or a bit of .txt ===
编辑：=== 为清楚起见，我希望将文件上传到服务器，无论是图片还是一些 .txt ===
I've looked around at other common problems similar to this but have been unable to alleviate my problem.
我环顾了其他与此类似的常见问题，但无法缓解我的问题。
The purpose is to create file upload functionality. The front end looks like this:
目的是创建文件上传功能。前端看起来像这样：
<div class="holdingDiv">
<form action="/file-upload" name="upload" class="dropzone dz-clickable" id="dropzoneArea" enctype="multipart/form-data">
<input style="display:none" type="file" name="thumbnail[thumbs]" />
<button id="uploadSubmitter" class="btn btn-primary btn-large" type="submit">Finished</button>
</form>
</div>
I have the form type and all that jazz setup.
我有表格类型和所有爵士乐设置。
The server.js that handles the post request looks like this:
处理 post 请求的 server.js 如下所示：
app.post('/file-upload', imports.upload);
Note that I also have the following required:
请注意，我还需要以下内容：
//needed for forms
app.use(express.bodyParser());
aswell as funcionality necessary to call imports.upload exports function.
以及调用imports.upload 导出函数所需的功能。
the exports.upload function looks a like this:
export.upload 函数看起来像这样：
exports.upload = function (req, res) {
console.log('FIRST TEST: ' + JSON.stringify(req.files));
console.log('second TEST: ' +req.files.thumbnail.thumbs.name);
//get the file extenstion:
//console.log('size' + req.files.thumbnail.size);
// console.log('test this: ' + req.files.thumbnail.name);
// var fileExtension = JSON.stringify(req.files);
//console.log('Im getting this file type: '+ fileExtension.name);
// console.log('this: '+req.files.upload);
//fs.readFile(req.files.uploadFiles.path, function (err, data) {
// // ...
// var newPath = __dirname + "/uploads/"+uploadFiles.name;
// fs.writeFile(newPath, data, function (err) {
// res.redirect("back");
// });
//});
}
A lot of stuff is commented out as I was trying different methods to get it to work. I can call it with JSON Stringify as a whole object, but I would like it as an object that I can dip into and get information from, for example I would like to know a files' type by splitting its name by '.':
当我尝试不同的方法让它工作时，很多东西都被注释掉了。我可以用 JSON Stringify 作为一个完整的对象来调用它，但我希望它是一个可以深入研究并从中获取信息的对象，例如，我想通过将文件名称拆分为“.”来了解文件的类型：
req.files.thumbnail.thumbs.name
but when i try this (even JSON Stringyfied) it says it is undefined.
但是当我尝试这个（甚至 JSON Stringyfied）时，它说它是未定义的。
THINGS I HAVE TRIED:
我尝试过的事情：
Moving the whole function to app.js (there is a small login function that works using req.body, I assumed this may fix it.
将整个函数移动到 app.js（有一个使用 req.body 的小型登录函数，我认为这可能会解决它。
using JSON Stringyfy to get at specific parts of the object. (returns undefined)
使用 JSON Stringyfy 获取对象的特定部分。（返回未定义）
smashing my head against the keyboard. (returns undefined)
把我的头撞在键盘上。（返回未定义）
changing the form enctype to several different things, however most of the answers on here state that form-data is the best enctype for file uploads.
将表单 enctype 更改为几种不同的内容，但是这里的大多数答案都表明 form-data 是文件上传的最佳 enctype。
Any help and pointers as to why this is happening would be much appreciated!!
任何有关为什么会发生这种情况的帮助和指示将不胜感激！
采纳答案by Konza
I didn't understand why you kept the name of input as "thumbnails[thumb]". You have to add the method = "POST" to your form.
我不明白您为什么将输入名称保留为“缩略图[拇指]”。您必须将 method = "POST" 添加到您的表单中。
I changed the name attribute to "theFile" and here is the html
我将名称属性更改为“theFile”，这是 html
<div class="holdingDiv">
<form action="/file-upload" name="upload" class="dropzone dz-clickable" id="dropzoneArea" enctype="multipart/form-data" method = "post">
<input type="file" name="theFile" />
<button id="uploadSubmitter" class="btn btn-primary btn-large" type="submit">Finished</button>
</form>
</div>
Now in your node js server do this.
现在在您的节点 js 服务器中执行此操作。
app.post('/file-upload',function(req,res){
console.log('FIRST TEST: ' + JSON.stringify(req.files));
console.log('second TEST: ' +req.files.theFile.name);
fs.readFile(req.files.theFile.path, function (err, data) {
var newPath = "/home/path/to/your/directory/"+req.files.theFile.name;
fs.writeFile(newPath, data, function (err) {
res.send("hi");
});
});
});
the req.files is a json which give the details of the uploaded request.
req.files 是一个 json，它提供了上传请求的详细信息。
Hope this helps.
希望这可以帮助。
回答by frnkxiao
Just for others visit this link using express 4.X. "multipart" middleware is not supported anymore. You need to use other middleware such as "multiparty" or "multer".
仅供其他人使用 express 4.X 访问此链接。不再支持“multipart”中间件。您需要使用其他中间件，例如“multiparty”或“multer”。
ref: TypeError: Cannot read property 'image' of undefined
参考：类型错误：无法读取未定义的属性“图像”
