上傳圖片

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'不是一個文件。不幸的是，我沒有我的筆記本電腦，所以我無法用調試器的確切信息做出迴應。 –

我不知道是什麼問題。沒有韻律或原因，這樣做很好。 –

回答

相關問題