На странице существует форма отправки изображений, события в которой обрабатывает скрипт fetch_upload.js
const form = document.getElementById('upload');
const button = document.getElementById('img-upload');
button.addEventListener('click', fetchReq, false);
function fetchReq() {
fetch('/form', {
method: 'POST',
data: new FormData(form)
})
.then(function (response) {
return response.json();
})
.then(function (data) {
console.log(data);
})
.catch(err => console.log(err));
}
<form id="upload" action="/form" method="post" enctype="multipart/form-data">
<label for="img">Загрузите фотографию</label><br>
<input type="file" name="img" id="img">
<button id="img-upload">Отправить</button><br>
</form>
<script src="js/fetch_upload.js"></script>
Запрос на стороне сервера обрабатывается вот так
app.post('/form', (req, res) => {
new formidable.IncomingForm().parse(req)
.on('fileBegin', (name, file) => {
file.path = __dirname + '/public/' + file.name;
})
.on('file', (name, file) => {
});
res.status('200').json({
name: "Fileл",
description: "some text information"
});
});
В результате чего ответ сервера должен благополучно выводиться в консоль, теоретически не заставляя страницу перезагружаться. И в общем всё отрабатывает правильно, но затем вместо страницы браузер отображает входящий json. Как сделать так, чтобы этого не происходило и в дальнейшем данные из json'a поместить на эту же страницу?
Предвосхищая ответы с использованием event.defaultPrevenred() в функции обработчика: если поместить данный код в функцию fetchReq то обработка ответа сервера произойдет правильно, но файл на сервер передан не будет. Тоже самое произойдёт если назначить тегу button атрибут type="button"