images

HTML Télécharger des codes:images

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

code Ajax: Résultat: succès

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

Je ne peux pas savoir ce qui ne va pas. J'espère que req.file existait, mais ce n'était pas le cas. J'ai trouvé le répertoire ('public/uploads'), mais il n'a pas de photos. Le code Ajax avait lancé une alerte ('succès'), je suppose que multer n'a pas enregistré l'image ou n'a pas obtenu les images. Mais j'ai vu la demande de réseau a envoyé l'image. Alors, qui peut me dire ce qui ne va pas?

Source

2017-07-26 Mr.He

Votre exemple de serveur API ne fonctionne pas, je suppose que c'est juste une partie d'un serveur en fonctionnement. Je signalerai exemple minimal serveur 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!') 
});

Le principal problème est ici

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

J'ai réalisé l'envoi d'un fichier dans une requête en utilisant var formData = new FormData($('form')[0]);

Voici un exemple de travail

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

Source

2017-07-26 10:12:34

C'est bon! Mais je ne peux pas comprendre pourquoi. –

@ M.Il comprend quel était le problème? Eh bien, si je me souviens bien, vous avez passé Button pas un fichier. Malheureusement, je n'ai pas mon portable ici, donc je ne suis pas en mesure de répondre avec le message exact du débogueur –

Je ne sais pas quel est le problème. Il fait bien sans rime ni raison. –

Répondre

Questions connexes