Carica più file con XMLHttpRequest su Express.js 3.5 Server

Question

Sto cercando di creare un uploader di file con FileAPI nativo in JavaScript e voglio caricare i file tramite XMLHttpRequest (senza jQuery) su un server Node.js, che utilizza Express.js.

La parte di lettura file funziona correttamente e quando carico il file senza XMLHttpRequest funziona perfettamente (i file sono in req.files in Express.js).

Il problema è il caricamento tramite AJAX: req.files è sempre vuoto.

Heres po 'di codice:

La forma:

<form action="http://localhost:3000/upload" method="POST" enctype="multipart/form-data" name="form"> 
    <input type="file" name="uploads" id="files" multiple="multiple"> 
    <input type="submit" name="submit" value="submit"> 
</form> 

La parte di upload nel frontend (in file [0] .data è un file - non è un array o qualcosa del genere):

function uploadFiles(files) { 
    var xhr = new XMLHttpRequest(); 
    xhr.submittedData = files; // Array of objects with files included. But it neither works with an array of files nor just one file 
    xhr.onload = successfullyUploaded; 
    xhr.open("POST", "http://localhost:3000/upload", true); 
    xhr.setRequestHeader('X-Requested-With','XMLHttpRequest'); 
    xhr.send(); 
} 

il backend in cui il problema si verifica:

exports.receiveUpload = function(req, res){ 
    console.log(req.files); // empty 
    var files = req.files.uploads; // always empty with AJAX upload. with normal upload it's fine 
    console.log(req.xhr); // true 
    // ... 
} 

Ed ecco alcuni Express.js config (ho già avuto lo stesso errore, senza AJAX - nei commenti nel codice si possono vedere le linee e post Stack Overflow che ha risolto per l'upload, senza AJAX):

// all environments 
app.set('port', process.env.PORT || 3000); 
app.set('views', path.join(__dirname, 'views')); 
app.set('view engine', 'ejs'); 
app.use(express.favicon()); 
app.use(express.logger('dev')); 
app.use(express.json()); 
app.use(express.urlencoded()); 

// this 3 lines have to be before app.use(app.router) 
// https://stackoverflow.com/questions/21877098/upload-file-using-express-failed-cannot-read-property-of-undefined 
app.use(express.multipart()); 
app.use(express.bodyParser({ keepExtensions: true, uploadDir: path.join(__dirname, 'public', 'uploads') })); 
app.use(express.methodOverride()); 


app.use(app.router); 
app.use(require('less-middleware')(path.join(__dirname, '/public'))); 
app.use(express.static(path.join(__dirname, 'public'))); 

Grazie in anticipo!

saluti,

C.

Answer 1

Thx a @Pengtuzi ho risolto:

ho usato il formdata API per caricare i file. Il mio errore è stato che pensavo che l'errore si sarebbe verificato sul server.

Ecco il codice che ha risolto per me:

function uploadFiles(files) { 
    var xhr = new XMLHttpRequest(); 
    var formData = new FormData(); 
    xhr.onload = successfullyUploaded; 
    xhr.open("POST", "http://localhost:3000/upload", true); 
    xhr.setRequestHeader('X-Requested-With','XMLHttpRequest'); 
    for(var file in files) { 
     formData.append("uploads", files[file].data); 
    } 
    xhr.send(formData); 
}