Prześlij wiele plików z XMLHttpRequest do Express.js 3.5 Server

Question

Próbuję zbudować program do przesyłania plików z natywnym FileAPI w JavaScript i chcę przesłać pliki przez XMLHttpRequest (bez jQuery) do serwera Node.js, który używa Express.js.

Część do czytania plików działa poprawnie, a kiedy ładuję plik bez XMLHttpRequest działa idealnie (pliki są w req.files w Express.js).

Problem polega na przesłaniu za pośrednictwem AJAX: req.files jest zawsze pusty.

Herezje niektóre kod:

Postać:

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

Część przesłać w frontend (w plikach [0] .data jest plik - nie tablica czy coś):

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

backend gdzie występuje problem:

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 
    // ... 
} 

A oto niektóre Express.js config (miałem już tego samego błędu bez AJAX - w komentarzach w kodzie widać linie i stanowiska przepełnieniem stosu że rozwiązać go za upload bez 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'))); 

Z góry dziękuję!

Pozdrawiam,

C.

Answer 1

Thx do @Pengtuzi Rozwiązałem go:

użyłem FormData API, aby przesłać pliki. Mój błąd polegał na tym, że myślałem, że błąd wystąpi na serwerze.

Oto kod, który rozwiązuje to dla mnie:

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