上传图片

HTML代码：上传图片

<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代码：结果是：成功

$('#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 
});

我无法找出什么是错的。我希望req.file存在，但事实并非如此。我找到了目录（'public/uploads'），但它没有任何图片。 Ajax代码运行alert（'success'），我想这个multer没有保存图像或没有获取图像。但我看到网络请求已发送图像。那么谁能告诉我它有什么问题？

来源

2017-07-26 Mr.He

您的API服务器示例不起作用，我认为它只是工作服务器的一部分。我将发布最小的API服务器例如

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!') 
});

主要的问题是在这里

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

我以var formData = new FormData($('form')[0]);

这里实现了请求发送一个文件是一个工作示例

<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>

来源

2017-07-26 10:12:34

没关系！但我不明白为什么。 –

@何先生明白问题是什么？那么如果我可以正确回忆你已经传递'Button'不是一个文件。不幸的是，我没有我的笔记本电脑，所以我无法用调试器的确切信息做出回应。 –

我不知道是什么问题。没有韵律或原因，这样做很好。 –

回答

相关问题