NodeJS下使用Express做的图片上传demo前端拿不到返回的数据

发布于 2022-09-02 01:24:18 字数 4293 浏览 21 评论 0

前端代码如下：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><%= title %></title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <link href="/stylesheets/fileinput.min.css" rel="stylesheet">

    <!--[if lt IE 9]>
      <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <!-- 主体 -->
    <div class="container">
          <div class="row">
              <div class="col-md-12">
                  <label class="control-label">Planets and Satellites</label>
                  <input id="carouselUpload" name="carouselUpload" type="file" data-show-preview="false" multiple class="file-loading">
              </div>
          </div>
    </div>

    <!-- jQuery Loading -->
    <script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
    <!-- Bootstrap JS Loading -->
    <script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
    <!-- fileupload JS Loading -->
    <script src="/javascripts/fileinput.min.js"></script>
    <script src="/javascripts/fileinput_locale_zh.js"></script>
    <!-- bootstrap fileinput config and callback function -->
    <script>
        $(document).on('ready', function() {
            $("#carouselUpload").fileinput({
                language: "zh",
                uploadUrl: "http://127.0.0.1:3000",
                allowedFileExtensions: ["jpg", "png", "gif", "jpeg"],
                uploadAsync: true
           });

        $('#carouselUpload').on('fileuploaded', function(event, numFiles, label) {
            console.log("change");
        });


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

后台：

var express = require('express');
var router = express.Router();
var formidable = require('formidable');
var fs = require('fs');

/* GET home page. */
router.get('/', function(req, res, next) {
    res.render('index', { title: 'Express' });
});

router.post('/', function(req, res, next) {
    res.header( 'Content-Type','text/javascript;charset=utf-8');        //设置返回字符串编码
    var form = new formidable.IncomingForm();                            //创建对象
    form.uploadDir = "./public/images/uploads/";                        //设置临时文件存放的路径
    form.encoding='utf-8';                                                //设置上传数据的编码
    form.keepExtensions = true;                                            //设置是否保持上传文件的拓展名
    form.maxFieldsSize = 2 * 1024 * 1024;                               //文件大小

    form.parse(req, function(err, fields, files) {
        if (err) {
          res.render('index', { title: err });
          return;        
        }  

        console.log(files);

        var extName = '';                      //后缀名
        switch (files.carouselUpload.type) {
          case 'image/pjpeg':
            extName = 'jpg';
            break;
          case 'image/jpeg':
            extName = 'jpg';
            break;         
          case 'image/png':
            extName = 'png';
            break;
          case 'image/x-png':
            extName = 'png';
            break;
          case 'image/gif':
            extName = 'gif';
            break;         
        }

        if(extName.length == 0){
            res.send('上传文件类型有误！');
            return;                   
        }

        var avatarName = Date.parse(new Date()) + '.' + extName;
        var newPath = form.uploadDir + avatarName;

        console.log(newPath);
        fs.renameSync(files.carouselUpload.path, newPath);  //重命名

        res.send(avatarName);
      });
});

module.exports = router;

上传能正常完成，没有错误提示，从chrome的里也能看到返回信息，最后绑定的fileuploaded事件的返回里始终拿不到任何东西，但奇怪的是如果将这个Event换成change，就可以正常触发！

分享到QQ

分享到微博