Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/node.js/38.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Node.js 文件上载在nodejs中不起作用_Node.js_Express_File Upload_Multer - Fatal编程技术网

Node.js 文件上载在nodejs中不起作用

Node.js 文件上载在nodejs中不起作用,node.js,express,file-upload,multer,Node.js,Express,File Upload,Multer,我正在尝试使用express和multer在nodejs中上传一个文件 index.js var mysql=require('mysql'); var session = require('express-session'); var multer=require('multer'); var express=require('express'); var path=require('path'); var cors=require('cors'); var nodemailer=requir

我正在尝试使用express和multer在nodejs中上传一个文件

index.js

var mysql=require('mysql');
var session = require('express-session');
var multer=require('multer');
var express=require('express');
var path=require('path');
var cors=require('cors');
var nodemailer=require('nodemailer');
var fileupload=require('express-fileupload');
var fs=require('fs');
const app=express();
app.use(cors());
app.use(fileupload());
var bodyParser=require('body-parser');
app.use(bodyParser.json({limit: '5mb'}));
app.use(bodyParser.urlencoded({limit: '5mb',extended:true}));
require('./routes.js')(app,mc,fs,multer);
app.listen(8080,function() {
        console.log('port listening on 8080');
})
module.exports=function(app,mc,fs,multer) {
    var storages = multer.diskStorage({
    destination: function(req, file, callback) {
        callback(null, './uploads')
    },
    filename: function(req, file, callback) {
        console.log(file)
        callback(null, file.fieldname + '-' + Date.now() + 
    path.extname(file.originalname))
    }
    })

app.post('/reactTest',function(req,res) {

    var uploads = multer({
        storage: storages,
        fileFilter: function(req, file, callback) {
            var ext = path.extname(file.originalname);
            if (ext !== '.png' && ext !== '.jpg' && ext !== '.gif' && ext !== '.jpeg') {
                res.send('Only images are allowed');
            }
            else {
                fs.exists('./uploads/'+file.originalname, function(exists) {    
                    console.log(exists);
                    if(exists) {
                        res.send('images already uploaded');
                    }
                    else {  
                        callback(null, true);
                    }
                })
            }   
        }
    }).single('user.uploadContent');
    uploads(req, res, function(err) {
        console.log(req.body);
        res.send('File is uploaded');
    })

})
    app.get('/',function(req,res) {
        var localTutor=require('./child.js');
        localTutor.NodeTutorial()();
        res.writeHead(200,{'Content-Type':'text/html'});
        res.write('<form action="fileUpload" method="post" enctype="multipart/form-data">');
        res.write('<input type="file" name="files" >');
        res.write('<br><input type="submit" >');
        res.write('</form>');
        res.send();
        //return res.send({error:true,message:'working'});
            //res.render('html');
    })
    app.post('/fileUpload',function(req,res) {

        var uploads = multer({
            storage: storages
        }).single('files');
        uploads(req, res, function(err) {
            if(err) {
                throw err;
            }
            return res.send({status:'file uploaded'});
        })
    })

}
<form action="fileUpload" method="post" enctype="multipart/form-data" 
id="form-id">
    <input type="file" id="file-select" name="files" multiple/><br/>
    <input type="text" name="email" id="email"><br>
    <button type="submit" id="upload-button">Upload</button>
</form>

<script>

var form = document.getElementById('form-id');
var fileSelect = document.getElementById('file-select');
var uploadButton = document.getElementById('upload-button');

form.onsubmit = function(event) {
  event.preventDefault();


  var files = fileSelect.files;
  var formData = new FormData();
  for (var i = 0; i < files.length; i++) {
      var file = files[i];

      if (!file.type.match('image.*')) {
        continue;
      }

      formData.append('files', file, file.name);
    }
    var email = document.getElementById('email').value;
    formData.append('email',email);
    let promise=fetch('http://localhost:8080/reactTest', {
                method:'POST',
                mode:'CORS',
                body:formData

        }).then(res =>res.json()).then(result=>console.log(result)) 
}

</script>
    app.post('/reactTest',function(req,res) {

    var uploads = multer({
        storage: storages,
        fileFilter: function(req, file, callback) {
            var ext = path.extname(file.originalname);
            if (ext !== '.png' && ext !== '.jpg' && ext !== '.gif' && ext !== '.jpeg') {
                res.send('Only images are allowed');
            }
            else {
                fs.exists('uploads/'+file.originalname, function(exists) {    
                    console.log(exists);
                    if(exists) {
                        res.send('images already uploaded');
                    }
                    else {  
                        callback(null, true);
                    }
                })
            }   
        }
    }).single('files');
    uploads(req, res, function(err) {
        console.log('----------',req.body);
        res.send('File is uploaded');
    })

})
routes.js

var mysql=require('mysql');
var session = require('express-session');
var multer=require('multer');
var express=require('express');
var path=require('path');
var cors=require('cors');
var nodemailer=require('nodemailer');
var fileupload=require('express-fileupload');
var fs=require('fs');
const app=express();
app.use(cors());
app.use(fileupload());
var bodyParser=require('body-parser');
app.use(bodyParser.json({limit: '5mb'}));
app.use(bodyParser.urlencoded({limit: '5mb',extended:true}));
require('./routes.js')(app,mc,fs,multer);
app.listen(8080,function() {
        console.log('port listening on 8080');
})
module.exports=function(app,mc,fs,multer) {
    var storages = multer.diskStorage({
    destination: function(req, file, callback) {
        callback(null, './uploads')
    },
    filename: function(req, file, callback) {
        console.log(file)
        callback(null, file.fieldname + '-' + Date.now() + 
    path.extname(file.originalname))
    }
    })

app.post('/reactTest',function(req,res) {

    var uploads = multer({
        storage: storages,
        fileFilter: function(req, file, callback) {
            var ext = path.extname(file.originalname);
            if (ext !== '.png' && ext !== '.jpg' && ext !== '.gif' && ext !== '.jpeg') {
                res.send('Only images are allowed');
            }
            else {
                fs.exists('./uploads/'+file.originalname, function(exists) {    
                    console.log(exists);
                    if(exists) {
                        res.send('images already uploaded');
                    }
                    else {  
                        callback(null, true);
                    }
                })
            }   
        }
    }).single('user.uploadContent');
    uploads(req, res, function(err) {
        console.log(req.body);
        res.send('File is uploaded');
    })

})
    app.get('/',function(req,res) {
        var localTutor=require('./child.js');
        localTutor.NodeTutorial()();
        res.writeHead(200,{'Content-Type':'text/html'});
        res.write('<form action="fileUpload" method="post" enctype="multipart/form-data">');
        res.write('<input type="file" name="files" >');
        res.write('<br><input type="submit" >');
        res.write('</form>');
        res.send();
        //return res.send({error:true,message:'working'});
            //res.render('html');
    })
    app.post('/fileUpload',function(req,res) {

        var uploads = multer({
            storage: storages
        }).single('files');
        uploads(req, res, function(err) {
            if(err) {
                throw err;
            }
            return res.send({status:'file uploaded'});
        })
    })

}
<form action="fileUpload" method="post" enctype="multipart/form-data" 
id="form-id">
    <input type="file" id="file-select" name="files" multiple/><br/>
    <input type="text" name="email" id="email"><br>
    <button type="submit" id="upload-button">Upload</button>
</form>

<script>

var form = document.getElementById('form-id');
var fileSelect = document.getElementById('file-select');
var uploadButton = document.getElementById('upload-button');

form.onsubmit = function(event) {
  event.preventDefault();


  var files = fileSelect.files;
  var formData = new FormData();
  for (var i = 0; i < files.length; i++) {
      var file = files[i];

      if (!file.type.match('image.*')) {
        continue;
      }

      formData.append('files', file, file.name);
    }
    var email = document.getElementById('email').value;
    formData.append('email',email);
    let promise=fetch('http://localhost:8080/reactTest', {
                method:'POST',
                mode:'CORS',
                body:formData

        }).then(res =>res.json()).then(result=>console.log(result)) 
}

</script>
    app.post('/reactTest',function(req,res) {

    var uploads = multer({
        storage: storages,
        fileFilter: function(req, file, callback) {
            var ext = path.extname(file.originalname);
            if (ext !== '.png' && ext !== '.jpg' && ext !== '.gif' && ext !== '.jpeg') {
                res.send('Only images are allowed');
            }
            else {
                fs.exists('uploads/'+file.originalname, function(exists) {    
                    console.log(exists);
                    if(exists) {
                        res.send('images already uploaded');
                    }
                    else {  
                        callback(null, true);
                    }
                })
            }   
        }
    }).single('files');
    uploads(req, res, function(err) {
        console.log('----------',req.body);
        res.send('File is uploaded');
    })

})
当我上传一个文件时,它返回状态为“文件已上传”,但该文件没有上传到目录。我不知道这里有什么问题?
我还附加了在前端创建restful api的代码

正如@wdetac所说,删除
app.use(fileupload())然后添加
var path=require('path')
到您的
routes.js
文件

一个有效的例子

视图/索引.ejs

var mysql=require('mysql');
var session = require('express-session');
var multer=require('multer');
var express=require('express');
var path=require('path');
var cors=require('cors');
var nodemailer=require('nodemailer');
var fileupload=require('express-fileupload');
var fs=require('fs');
const app=express();
app.use(cors());
app.use(fileupload());
var bodyParser=require('body-parser');
app.use(bodyParser.json({limit: '5mb'}));
app.use(bodyParser.urlencoded({limit: '5mb',extended:true}));
require('./routes.js')(app,mc,fs,multer);
app.listen(8080,function() {
        console.log('port listening on 8080');
})
module.exports=function(app,mc,fs,multer) {
    var storages = multer.diskStorage({
    destination: function(req, file, callback) {
        callback(null, './uploads')
    },
    filename: function(req, file, callback) {
        console.log(file)
        callback(null, file.fieldname + '-' + Date.now() + 
    path.extname(file.originalname))
    }
    })

app.post('/reactTest',function(req,res) {

    var uploads = multer({
        storage: storages,
        fileFilter: function(req, file, callback) {
            var ext = path.extname(file.originalname);
            if (ext !== '.png' && ext !== '.jpg' && ext !== '.gif' && ext !== '.jpeg') {
                res.send('Only images are allowed');
            }
            else {
                fs.exists('./uploads/'+file.originalname, function(exists) {    
                    console.log(exists);
                    if(exists) {
                        res.send('images already uploaded');
                    }
                    else {  
                        callback(null, true);
                    }
                })
            }   
        }
    }).single('user.uploadContent');
    uploads(req, res, function(err) {
        console.log(req.body);
        res.send('File is uploaded');
    })

})
    app.get('/',function(req,res) {
        var localTutor=require('./child.js');
        localTutor.NodeTutorial()();
        res.writeHead(200,{'Content-Type':'text/html'});
        res.write('<form action="fileUpload" method="post" enctype="multipart/form-data">');
        res.write('<input type="file" name="files" >');
        res.write('<br><input type="submit" >');
        res.write('</form>');
        res.send();
        //return res.send({error:true,message:'working'});
            //res.render('html');
    })
    app.post('/fileUpload',function(req,res) {

        var uploads = multer({
            storage: storages
        }).single('files');
        uploads(req, res, function(err) {
            if(err) {
                throw err;
            }
            return res.send({status:'file uploaded'});
        })
    })

}
<form action="fileUpload" method="post" enctype="multipart/form-data" 
id="form-id">
    <input type="file" id="file-select" name="files" multiple/><br/>
    <input type="text" name="email" id="email"><br>
    <button type="submit" id="upload-button">Upload</button>
</form>

<script>

var form = document.getElementById('form-id');
var fileSelect = document.getElementById('file-select');
var uploadButton = document.getElementById('upload-button');

form.onsubmit = function(event) {
  event.preventDefault();


  var files = fileSelect.files;
  var formData = new FormData();
  for (var i = 0; i < files.length; i++) {
      var file = files[i];

      if (!file.type.match('image.*')) {
        continue;
      }

      formData.append('files', file, file.name);
    }
    var email = document.getElementById('email').value;
    formData.append('email',email);
    let promise=fetch('http://localhost:8080/reactTest', {
                method:'POST',
                mode:'CORS',
                body:formData

        }).then(res =>res.json()).then(result=>console.log(result)) 
}

</script>
    app.post('/reactTest',function(req,res) {

    var uploads = multer({
        storage: storages,
        fileFilter: function(req, file, callback) {
            var ext = path.extname(file.originalname);
            if (ext !== '.png' && ext !== '.jpg' && ext !== '.gif' && ext !== '.jpeg') {
                res.send('Only images are allowed');
            }
            else {
                fs.exists('uploads/'+file.originalname, function(exists) {    
                    console.log(exists);
                    if(exists) {
                        res.send('images already uploaded');
                    }
                    else {  
                        callback(null, true);
                    }
                })
            }   
        }
    }).single('files');
    uploads(req, res, function(err) {
        console.log('----------',req.body);
        res.send('File is uploaded');
    })

})

您是否检查您的上载文件夹是否具有正确的权限?您是否拥有所有权限。可能
fileupload
模块与
multer
冲突?“path”未定义如何在删除应用程序时检索表单数据对象。使用(fileupload())?您可以通过“req.file”上载(req,res,function(err){console.log(req.file)访问它“好的。但是我还在表单数据对象中添加了一些其他内容。我如何在不使用express fileupload的情况下检索这些内容。例如:(formdata.append(“fname”):“pinto”))如何在不使用express fileupload的情况下从表单数据对象中检索fname?如果您正在处理输入数据,请在前端检查req.body,我将发送表单数据内容,而不添加任何标题,并尝试通过将其转换为res.json()来检索响应.但它失败了。这里的问题是什么?