【问题标题】:node.js multi file upload not workingnode.js多文件上传不起作用
【发布时间】:2015-01-16 06:28:00
【问题描述】:
<form action="http://localhost:3000/examples" method="post" enctype="multipart/form-data" accept="application/json">
    <input type="text" name ="name">
    <input type="text" name ="codedescription">
    <input type="file" name ="file">
    <input type="submit" value="Upload selected file to server">
</form>

var multer  = require('multer');
    app.use(multer({ dest: './uploads/',
        onFileUploadStart : function(file){
            console.log('File recieved:');
            console.log(file);
        },
        onFileUploadData:function (file,data){
            console.log('Data recieved');
        },
        onParseEnd: function(req,next){
            next();
        }
    }));
app.route('/examples').post(users.requiresLogin, examples.create);

exports.create = function(req, res) {
        console.log("req.files"+req.files);
        console.log("req.name"+req.body.name);
        console.log("req.codedescription"+req.body.codedescription);
    };

在没有 enctype="multipart/form-data" 的情况下提交表单正在工作,但我无法获取文件。

使用 enctype="multipart/form-data" 提交表单正在工作,但我无法获取文件和数据。

【问题讨论】:

标签: node.js express multer


【解决方案1】:

你可以试试这个

<html>
<head>
<title>FileUpload</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<form id       =  "uploadForm"
     enctype   =  "multipart/form-data"
     action    =  "http://localhost:3000/api/photo"
     method    =  "post"
>
<input type="file" name="userPhoto" multiple />
<input type="submit" value="Upload Image" name="submit" id="btnUpload">
<span id="spnStatus" />
</form>

<script>
        $(document).ready(function(){
            $('#btnUpload').click(function(){
                $('#spnStatus').empty().text("File is Uploading");
                $(this).ajaxSubmit({
                 error : function(xhr){
                    status('Error : '+xhr.status);
                    }

                 success : function(response){
                    $('#spnStatus').empty().text(xhr);
                    }
                });
            });

        });
    </script>
</body>
</html>

NodeJS 表达

var express =   require("../node_modules/express");
var multer  =   require('../node_modules/multer');
var bodyParser =    require("../node_modules/body-parser");
var app =   express();
app.use(bodyParser.json());


var storage =   multer.diskStorage({
  destination: function (req, file, callback) {
    callback(null, './uploads');
  },
  filename: function (req, file, callback) {
    callback(null, file.fieldname + '-' + Date.now());
  }
});
var upload = multer({ storage : storage }).array('userPhoto',8);

app.get('/',function(req,res){
      res.sendFile(__dirname + "/fileUpload.html");
});

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

          upload(req,res,function(err) {
            if(err) {
              console.log(err);
                return res.end("Error uploading file.");
            }
            res.end("File is uploaded");
         });
});

app.listen(3001,function(){
    console.log("Working on port 3001");
});

现在您一次最多可以上传8个文件,如果要上传超过8个,只需编辑var upload = multer({ storage : storage }).array('userPhoto','LIMITHERE');

【讨论】:

    【解决方案2】:

    @karthik 评论,我认为你也需要这个,包括在 jquery 之后,当你想使用他的例子时:

    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery.form/3.51/jquery.form.min.js"></script>
    

    【讨论】:

      猜你喜欢
      • 2017-09-01
      • 1970-01-01
      • 1970-01-01
      • 2016-02-20
      • 2014-12-17
      • 2013-12-08
      • 1970-01-01
      • 2015-12-20
      相关资源
      最近更新 更多