weixin_33739541 2017-07-26 09:29 采纳率: 0%
浏览 31

上传图片

HTML code:

<form  enctype="multipart/form-data">
   <input id="upFile" class="upFile" type="file"
    size="0" name="file" accept="image/gif,image/jpeg,image/png">
   <input type="submit" id="upFileBtn" class="upFile">
</form>

Ajax code: result:success

$('#upFileBtn').click(function () {
    var file = $('#upFile');
    var formData = new FormData();
    formData.append('file',file[0]);
    $.ajax({
        url: '/api/upload',
        type: 'post',
        data: formData,
        // async: false,
        cache: false,
        contentType: false,
        processData: false,
        success: function(data){
            if(200 === data.code) {
                $('#upFile').val('');
                alert('success');
            } else {
                alert("failed");
            }

        },
        error: function(){
            alert("wrong");
        }
    });
});

API:

var express = require('express');
var router = express.Ro
router();var multer  = require('multer');
var storage = multer.diskStorage({
    destination: function (req, file, cb) {
      cb(null, config.upload)// upload:"./public/uploads"
   },
    filename: function (req, file, cb) {
      cb(null,file.originalname)
   }
});

var upload = multer({ storage: storage });


//upload
router.post('/upload', upload.single('file'), function (req, res, next) {
console.log(req.file);//undefined
});

I can't find out what's wrong. I hope that req.file existed, but it wasn't. I found the directory('public/uploads'),b ut it doesn't have any pictures. The Ajax code had run alert('success'), I guess that multer did't save image or didn't get the images. But I saw the network request has send the image. So who can tell me what's wrong with it?

  • 写回答

1条回答 默认 最新

  • csdnceshi62 2017-07-26 10:12
    关注

    Your API server example is not working, I assume that it is just a part of a working server. I will post minimal API server example 

    var express = require('express');
var app     = express();
var multer  = require('multer');
var path    = require('path');

app.use('/', express.static(__dirname));

var storage = multer.diskStorage({
  destination: function(req, file, cb) {
    cb(null, './files');// upload:"./public/uploads"
  },
  filename: function(req, file, cb) {
    cb(null, file.originalname)
  }
});

var upload = multer({storage: storage});

//upload
app.post('/api/upload', upload.single('file'), function(req, res, next) {
  console.log(req.file);//undefined
  res.send({code: 200});
});

app.listen(3000, function() {
  console.log('Example app listening on port 3000!')
});

    The main problem is here

    var file = $('#upFile');
var formData = new FormData();
formData.append('file',file[0]);

    I have achieved sending a file in a request by using var formData = new FormData($('form')[0]);

    Here is a working example

    <html>
<head>
  <script
      src="https://code.jquery.com/jquery-3.2.1.js"
      integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE="
      crossorigin="anonymous"></script>
</head>
<body>
<form enctype="multipart/form-data">
  <input id="upFile" class="upFile" type="file"
         size="0" name="file" accept="image/gif,image/jpeg,image/png">
  <input type="submit" id="upFileBtn" class="upFile">
</form>
<script>
  $('#upFileBtn').click(function() {
    var formData = new FormData($('form')[0]);
    $.ajax({
      url: '/api/upload',
      type: 'post',
      data: formData,
      // async: false,
      cache: false,
      contentType: false,
      processData: false,
      success: function(data) {
        if (200 === data.code) {
          $('#upFile').val('');
          alert('success');
        } else {
          alert("failed");
        }

      },
      error: function() {
        alert("wrong");
      }
    });
  });
</script>

</body>
</html>
    评论

报告相同问题？

悬赏问题

  • ¥15 虚幻5 UE美术毛发渲染
  • ¥15 CVRP 图论 物流运输优化
  • ¥15 Tableau online 嵌入ppt失败
  • ¥100 支付宝网页转账系统不识别账号
  • ¥15 基于单片机的靶位控制系统
  • ¥15 真我手机蓝牙传输进度消息被关闭了，怎么打开？(关键词-消息通知)
  • ¥15 装 pytorch 的时候出了好多问题，遇到这种情况怎么处理？
  • ¥20 IOS游览器某宝手机网页版自动立即购买JavaScript脚本
  • ¥15 手机接入宽带网线，如何释放宽带全部速度
  • ¥30 关于#r语言#的问题：如何对R语言中mfgarch包中构建的garch-midas模型进行样本内长期波动率预测和样本外长期波动率预测