Передаю файл MP3 размером 2,5 Мб на сервер, сервер выдает ошибку: "Неверный тип/формат файла". Как ее исправить? Файл передаю по характеристикам в код

Question

Намучился с заданием по учебе, сижу уже несколько дней, не могу понять в чем проблема. Вы - последняя надежда :( Передаю файл MP3 размером 2,5 Мб на сервер, сервер выдает ошибку: "Неверный тип/формат файла". Как ее исправить? Файл передаю по характеристикам в коде. Код, насколько я знаю рабочий. Может нужно в браузере что-то настроить? Помогите, пожалуйста! Буду очень признателен. Код:

Код index.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="form.css">
    <title>Бронирование номер в гостинице</title>
</head>
<body>


    <form action="http://localhost:3000" method="post">
    <fieldset class="contact_info">
    <legend>Контактная информация:</legend>
        <div class="main">
            <div class="field">
            <label for="ФИО"><span></span></label>
            <input type="text" id="fio" name="ФИО" placeholder="ФИО" ><br><br>
            </div>

            <div class="field">
            <label for="Телефон"></label>
            <input type="tel" id="phone" name="Телефон" placeholder="Телефон"><br><br>
            </div>

            <div class="field">
            <label for="E-mail"><span></span></label>
            <input type="email" id="email" name="E-mail" placeholder="E-mail">
            </div>
        </div>
    </fieldset><br>

    <fieldset class="private_info">
    <legend>Личная инфорация:</legend>
      <div class="main"> 
           <div class="field">
            <label for="Пол">Пол</label>
            <select name="Пол" id="gender">
            <option value="Мужской">мужской</option>
            <option value="Женский">женский</option>
            </select><br><br>
           </div>

           <div class="field">
            <label for="Возраст">Возраст<span>*</span></label>
            <input type="date" id="age" name="Возраст" ><br><br>
           </div>

           <div class="field">
            <label for="Пароль">Пароль<span>*</span></label>
            <input type="password" id="password" name="Пароль" minlength="8" >
           </div>
     </div>
    </fieldset><br><br>

      <fieldset class="radio_but">
      <legend>Тип номера</legend>
            <label><input type="radio" name="Тип номера" value="Одноместный" >Одноместный</label>
            <label><input type="radio" name="Тип номера" value="Двухместный">Двухместный</label>
            <label><input type="radio" name="Тип номера" value="Трёххместный">Трёххместный</label>
      </fieldset><br>

      <fieldset class="radio_but2">
      <legend>Категория номера</legend>
            <label><input type="radio" name="category" value="standart" >Стандартный</label><br><br>
            <label><input type="radio" name="category" value="luxe">Люкс</label><br><br>
            <label><input type="radio" name="category" value="president">Президентский</label>
      </fieldset><br><br>

       <fieldset class="radio_but3">
       <legend>Опции</legend>
            <label><input type="checkbox" name="Опции" value="Бесплатная отмена">Бесплатная отмена</label>
            <label><input type="checkbox" name="Опции" value="Кешбэк по карте постоянного гостя">Кешбэк по карте постоянного гостя</label>
      </fieldset><br>

      <fieldset class="radio_but4">
      <legend class="">Дополнительные услуги</legend>
            <label><input type="checkbox" name="Дополнительные услуги" value="Завтрак">Завтрак</label>
            <label><input type="checkbox" name="Дополнительные услуги" value="WiFi">Wi-Fi</label>
      </fieldset><br><br>

      <fieldset class="radio_but5">
            <legend>Сроки пребывания</legend>
            <label for="Дата заезда">Дата заезда <span>*</span></label>
            <input type="date" id="check-in-date" name="Дата заезда" ><br><br>
            <label for="дата выезда">Дата выезда<span>*</span></label>
            <input type="date" id="check-out-date" name="Дата выезда" >
      </fieldset><br><br>

      <fieldset class="report">
        <label for="Комментарий к бронированию">Комментарий к бронированию</label><br>
        <textarea name="Комментарий к бронированию" id="comment" cols="90" rows="10" placeholder="Необязательно к заполнению..."></textarea><br><br>
    </fieldset><br><br>

        <fieldset class="filee">
                <label for="uploadingFile">Подгрузить файл</label><br><br>
                <input type="file" id="uploadingFile" name="uploadingFile" >
                <div class="button">
                    <button type="button"  class="btn btn--red" onclick="uploadFile(event)">Загрузить файл</button><br><br>
                </div>
                    <input type="text" id="upload-message" readonly>

                <div class="button"></div>
                    <button type="button" class="btn btn--red" onclick="saveFormDataToFile()">Записать данные в файл</button>
                </div>
            </fieldset><br><br>
       
 
    <div class="button">
        <button type="submit" class="btn btn--red">Забронировать</button>
    </div>

    </form>
    <script src="server.js"></script>
    <script src="client.js"></script>
</body>
</html>

КОД server.js

const express = require('express');
const app = express();
const multer = require('multer');
const bodyParser = require('body-parser');
const path = require('path');

app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: true }));

// Обработка POST запроса
app.post('/', (req, res) => {
    const formData = req.body;
    const generatedPage = generatePage(formData);
    res.send(generatedPage);
});

// Возвращаем HTML-форму для GET запроса
app.get('/', (req, res) => {
    res.sendFile(path.join(__dirname, 'index.html'));
});

// Некоторые вспомогательные функции для форматирования данных и создания страницы
function generatePage(formData) {
    let pageContent = `
        <!DOCTYPE html>
        <html lang="en">
        <head>
        <style>
        body{
            color: #fff;
            text-align: center;
        }

        h1{
            font-size: 32px;
        }

        
        </style>
            <meta charset="UTF-8">
            <link rel="stylesheet" type="text/css" href="form.css">
            <title>Form Data</title>
        </head>
        <body>
            <h1>Заявка на бронирование</h1>
    `;
    for (const key in formData) {
        pageContent += `<p>${key}: ${formData[key]}</p>`;
    }
    if (formData.category === "standart") {
        pageContent += '<img src="standart.jpg" alt="Стандарт" width="600" height="500">';
        } else if(formData.category === "luxe"){
            pageContent += '<img src="luxe.jpg" alt="Люкс" width="600" height="500">';
        }
        else{
            pageContent += '<img src="president.jpg" alt="Президентский" width="600" height="500" >';
        }
    pageContent += `</body></html>`;
    return pageContent;
}

// Устанавливаем папку для статических файлов
app.use(express.static('D:/рабочий стол/3 лаба димама/public'));

const minFileSize = 1  * 1024; // 1 Kb
const maxFileSize = 100 * 1024 * 1024; // 5 MB

// Настраиваем хранилище имен файлов и их местоположение.
const storage = multer.diskStorage({
    destination: function (req, file, cb) {
        cb(null, 'uploads');
    },
    filename: function (req, file, cb) {
        cb(null, Date.now() + '-' + file.originalname);
    }
});

const allowedFileExtensions = ['MP3'];
// Используем Multer для обработки файлов с учетом настроек хранилища.
const upload = multer({
  storage: storage,
  fileFilter: (req, file, cb) => {
    const fileExtension = file.originalname.split('.').pop().toLowerCase();
    if (allowedFileExtensions.includes(fileExtension)) {
      return cb(null, true);
    } else {
      return cb(new Error('Может быть загружен только 7z файл!'), false);
    }
  }
});
// Определяем маршрут для обработки POST-запросов на загрузку файла.
app.post('/upload', upload.single('uploadingFile'), async (req, res) => {
    try {
        if (req.file) {
            // Получаем размер загруженного файла в байтах и мегабайтах.
            const fileSizeInBytes = req.file.size;
            const fileSizeInMB = fileSizeInBytes / (1024 * 1024);
            
            console.log("Размер файла:", fileSizeInMB, "Мбайт");

            // Проверяем, соответствует ли размер файла заданным критериям.
            if (fileSizeInBytes >= minFileSize && fileSizeInBytes <= maxFileSize) {
         
                console.log("Файл успешно загружен");
                res.status(200).json({ success: true });
            } else {
                
                await fs.unlink(req.file.path);
                console.log("Некорректный размер или тип файла. Файл удален.");
                res.status(400).json({ success: false, error: 'InvalidFileSize' });
            }
        } else {
            
            console.log("Файл не загружен");
            res.status(400).json({ success: false, error: 'Выберите файл для загрузки' });
        }
    } catch (error) {
        // В случае ошибки при загрузке файла отправляем ошибку сервера.
        console.error('Ошибка при загрузке файла:', error.message);
        res.status(500).json({ success: false, error: error.message });
    }
});


// Слушаем указанный порт
const port = 3000;
app.listen(port, () => {
    console.log(`Сервер запущен на порту ${port}`);
});

КОД client.js

function uploadFile() {
    var fileInput = document.getElementById('uploadingFile');
    var uploadMessageInput = document.getElementById('upload-message');

    // Проверяем, выбран ли файл
    if (fileInput && fileInput.files && fileInput.files.length > 0) {
        var formData = new FormData();
        formData.append('uploadingFile', fileInput.files[0]);

        fetch('/upload', {
            method: 'POST',
            body: formData
        })
        .then(response => {
            if (!response.ok) {
            throw new Error('леллалеолпоарм');
            }
            return response.json();
        })
        .then(data => {
            if (data.success) {
                alert('Файл загружен');
                uploadMessageInput.value = 'Успех';
            } else {
                handleUploadError(data);
                uploadMessageInput.value = 'Неуспех';
            }
        })
        .catch(error => {
            console.error('Произошла ошибка при отправке запроса:', error);
            alert('Ошибка при отправке запроса на сервер. ' + error.message);
            uploadMessageInput.value = 'Неуспех';
        });
    } else {
        alert('Выберите файл для загрузки');
    }
}

function saveFormDataToFile() {
    // Получаем данные из формы
    var formData = new FormData(document.querySelector('form'));

    // Преобразуем данные в текстовую строку
    var formDataText = '';
    formData.forEach(function (value, key) {
        formDataText += `${key}: ${value}\n`;
    });

    // Создаем Blob (бинарные данные) с текстовой строкой
    var blob = new Blob([new TextEncoder().encode(formDataText)], { type: 'text/plain;charset=utf-8' });

    // Создаем ссылку для скачивания файла
    var link = document.createElement('a');
    link.href = URL.createObjectURL(blob);
    link.download = 'formData.txt';

    // Добавляем ссылку на страницу
    document.body.appendChild(link);

    // Варианты выбора пользователя
    var options = ["Просмотреть", "Скачать", "Отмена"];

    // Выводим диалоговое окно с вариантами
    var userChoice = window.prompt("Что необходимо сделать с файлом?\n1. Просмотреть\n2. Скачать\n3. Отмена", "1");

    // Обрабатываем выбор пользователя
    switch (userChoice) {
        case "1":
            // Пользователь выбрал "Просмотреть", открываем файл в новом окне
            window.open(link.href, '_blank');
            break;
        case "2":
            // Пользователь выбрал "Скачать", эмулируем клик для скачивания файла
            link.click();
            // Выводим сообщение о типе файла
            alert("Тип файла: text/plain");
            break;
        case "3":
        case null:
            // Пользователь выбрал "Отмена" или закрыл диалоговое окно, ничего не делаем
            break;
        default:
            // Неизвестный выбор, предполагаем "Просмотреть"
            window.open(link.href, '_blank');
            break;
    }

    // Удаляем ссылку
    document.body.removeChild(link);
}

css.css

body{
    background: url(https://iteraciya.ru/upload/uf/96f/d0z3mfktdekdbh1u3vc6v6iui4ezbci3.jpg);
    background-size: cover;
   
}

body::before {
    content: "";
    background: rgba(0, 0, 0, 0.8); 
    background-size: cover;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
}

fieldset {
    margin: 0 auto;
    width: auto;
    text-align: center;
    border-width: 5px;
    border-radius: 10px;
    border-color: rgb(68, 130, 211);
    background-color: #fff;
}



legend{
    color:rgb(68, 130, 211);
    padding-top: 20px;
    font-size: 28px;
}

label{
    font-size: 20px;
    color: rgb(29, 75, 134);
}

.contact_info {
    display: grid;
    justify-content: center;
    width: fit-content;
}

.main {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
   
}

.field {
    text-align: left;
    margin-right: 10px; 
}

.field:last-child {
    margin-right: 0px; 
}

#fio,
#phone,
#email,
#gender,
#age,
#password,
#check-in-date,
#uploadingFile,
#upload-message,
#check-out-date{
    width: 200px; 
    height: 40px; 
    padding-left: 10px;;
}

.private_info{
   display: block;
   width: 250px;
}

span{
    color: rgb(68, 130, 211);
}

label {
    float:left;
    padding-right:10px;
}

.radio_but{
    width: fit-content;
}

.radio_but2{
    width: 250px;
}

.radio_but3{
    width: 500px;
}

.radio_but4{
    display: flex;
    justify-content: space-between;
    width: fit-content;
}

.radio_but5{
   
    width: fit-content;
}

.report{
    width: fit-content;
}

.filee{
    align-items: center;
    width: 250px;
    justify-content: left;
}

.button{
    padding-top: 20px;
    margin: 0 auto;
    width: auto;
    text-align: center;
}

.btn{
    display: inline-block;
    vertical-align: top;
    padding: 14px 40px;

    cursor: pointer;
    border-width: 2px;
    border-radius: 5px;
    font-family: inherit;
    font-size: 13px;
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
    transition: background .1s linear;

}

.btn--red{
    background-color: rgb(68, 130, 211);
}

.btn--red:hover{
    border-color: rgb(68, 130, 211);
    background-color:rgb(255, 255, 255);
    color:rgb(68, 130, 211);
}

#upload-message{
    text-align: center;
    font-size: 18px;
    font-weight: bold;
}

БЛОГ НА HUSL

Передаю файл MP3 размером 2,5 Мб на сервер, сервер выдает ошибку: "Неверный тип/формат файла". Как ее исправить? Файл передаю по характеристикам в код

Ответы (0 шт):