Hochladen Bilder

HTML-Code:Hochladen Bilder

<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: Ergebnis: Erfolg

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

Ich kann nicht herausfinden, was los ist. Ich hoffe, dass req.file existiert hat, aber es war nicht. Ich habe das Verzeichnis gefunden ('public/uploads'), aber es hat keine Bilder. Der Ajax-Code war alarmiert ('Erfolg'), ich vermute, dass Multer das Bild nicht gespeichert hat oder die Bilder nicht erhalten hat. Aber ich habe gesehen, dass die Netzwerkanfrage das Bild gesendet hat. Wer kann mir also sagen, was damit nicht stimmt?

Quelle

2017-07-26 Mr.He

Ihr API-Server-Beispiel funktioniert nicht, ich nehme an, dass es nur ein Teil eines funktionierenden Servers ist. Ich werde minimal Beispiel API-Server bereitstellen

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

Das Hauptproblem ist hier

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

ich in einer Anfrage erreicht durch Verwendung var formData = new FormData($('form')[0]);

Hier Senden einer Datei ist ein funktionierendes Beispiel

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

Quelle

2017-07-26 10:12:34

Es ist in Ordnung! Aber ich kann nicht verstehen warum. –

@ Mr.Er verstehe, was das Problem war? Nun, wenn ich mich richtig erinnern kann, haben Sie Button nicht eine Datei übergeben. Leider habe ich meinen Laptop hier nicht, also kann ich nicht mit der genauen Nachricht vom Debugger antworten –

Ich weiß nicht, was das Problem ist. Es ist gut ohne Reim oder Grund. –

Hochladen Bilder

Antwort

Verwandte Themen