Как загрузить файл на сервер node js без перехода на новую страницу?

Question

[Jintsuu]

Есть форма которая принимает файл, далее этот файл отправляется на сервер, где проходит необходимые процедуры, после этого я хочу получить то что внутри файла и передать это обратно на клиентскую часть и вставить эти данные в нужное поле, в моем случае получается, что после загрузки файла с моего localhost:3000 меня отправляет на localhost:4000/upload, хотелось бы обойтись без этого и ещё и сами данные получить, как я понимаю, мне нужно организовать функцию которая срабатывает при нажатии на мою кнопку отправки и в этой функции используется fetch, все ли верно я понимаю? В любом случае буду очень благодарен за пример того, как можно реализовать то что требуется. Заранее спасибо за оказанную помощь!

app.post('/upload', function(req, res) {
    var file = req.files.userFile,
        userFile = file.name;
    file.mv('upload/'+ userFile, function(err){
        if(err) {
            console.log(err);
        } else {
            console.log('Done!');
            res.send('Done');
        }
    })
    var text = fs.readFileSync(`upload/${userFile}`, 'utf8');
    console.log(text.toString());
  });

Comments

[Роман]

jQuery AJAX загрузка файлов на сервер

Вам нужны шаги 1 и 2.

html

<input type="file" multiple="multiple" accept=".txt,image/*">
<a href="#" class="upload_files button">Загрузить файлы</a>
<div class="ajax-reply"></div>

js (jQuery)

var files; // переменная. будет содержать данные файлов

// заполняем переменную данными, при изменении значения поля file 
$('input[type=file]').on('change', function(){
	files = this.files;
});

// обработка и отправка AJAX запроса при клике на кнопку upload_files
$('.upload_files').on( 'click', function( event ){

	event.stopPropagation(); // остановка всех текущих JS событий
	event.preventDefault();  // остановка дефолтного события для текущего элемента - клик для <a> тега

	// ничего не делаем если files пустой
	if( typeof files == 'undefined' ) return;

	// создадим объект данных формы
	var data = new FormData();

	// заполняем объект данных файлами в подходящем для отправки формате
	$.each( files, function( key, value ){
		data.append( key, value );
	});

	// добавим переменную для идентификации запроса
	data.append( 'my_file_upload', 1 );

	// AJAX запрос
	$.ajax({
		url         : '/upload',
		type        : 'POST', // важно!
		data        : data,
		cache       : false,
		dataType    : 'json',
		// отключаем обработку передаваемых данных, пусть передаются как есть
		processData : false,
		// отключаем установку заголовка типа запроса. Так jQuery скажет серверу что это строковой запрос
		contentType : false, 
		// функция успешного ответа сервера
		success     : function( respond, status, jqXHR ){

			// ОК - файлы загружены
			if( typeof respond.error === 'undefined' ){
				// выведем пути загруженных файлов в блок '.ajax-reply'
				var files_path = respond.files;
				var html = '';
				$.each( files_path, function( key, val ){
					 html += val +'<br>';
				} )

				$('.ajax-reply').html( html );
			}
			// ошибка
			else {
				console.log('ОШИБКА: ' + respond.error );
			}
		},
		// функция ошибки ответа сервера
		error: function( jqXHR, status, errorThrown ){
			console.log( 'ОШИБКА AJAX запроса: ' + status, jqXHR );
		}

	});

});