Загрузите несколько файлов с помощью XMLHttpRequest для Express.сервер js 3.5

Я пытаюсь создать загрузчик файлов с собственным FileAPI в JavaScript, и я хочу загрузить файлы через XMLHttpRequest (без jQuery) на узел.сервер js, который использует Express.js.

часть чтения файлов работает нормально, и когда я загружаю файл без XMLHttpRequest, он отлично работает (файлы находятся в req.файлы в Express.в JS).

проблема заключается в загрузке через AJAX:req.файлы всегда есть пуста.

Heres код:

форма:

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

часть загрузки в интерфейсе (в файлах[0].данные-это файл, а не массив или что-то еще):

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

бэкэнд, где возникает проблема:

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

и вот некоторые экспресс.JS config (у меня уже была такая же ошибка без AJAX - в комментариях в коде вы можете увидеть строки и сообщение переполнения стека, которое решило ее для загрузки без 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')));

спасибо вперед!

С уважением,

С.

7
express file-upload javascript node.js xmlhttprequest

1 ответов

Thx к @Pengtuzi я решил это:

Я использовал API FormData для загрузки файлов. Моя ошибка заключалась в том, что я думал, что ошибка произойдет на сервере.

вот код, который решил его для меня:

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