Загрузка файлов в nodejs с помощью fortjs

Введение

В этой статье я покажу вам, как мы можем загружать файлы в nodejs с помощью фреймворка fortjs.

В этой статье я буду использовать машинописный текст, но вы также можете использовать JavaScript es6.

Давайте код

Настройка проекта

Мы собираемся использовать инструмент fort-creator -a cli для помощи в разработке fortjs.

Выполните следующие шаги последовательно -

Установите создатель форта глобально — выполните команду npm i fort-creator -g
Создать новый проект — fort-creator new my-app. Здесь «my-app» — это название приложения, вы можете выбрать любое.
Войдите в каталог проекта — cd my-app
Запустите сервер разработки — fort-creator start
Откройте URL — http://localhost:4000/

Вы должны увидеть что-то вроде этого в браузере -

Создать форму загрузки

Нам нужно создать представление, которое будет содержать форму загрузки.

Вы можете увидеть папку «views» внутри каталога проекта. Эта папка содержит все представления. Давайте добавим представление upload.html в папку представления по умолчанию, т.е. «представления/по умолчанию».

Вы можете задаться вопросом — зачем лишняя папка по умолчанию?

Это потому, что представления организованы с учетом контроллера, чтобы все было понятно. Вы можете видеть внутри папки контроллеров, у нас есть контроллер с именем «DefaultController». Таким образом, представления, используемые этим контроллером, должны храниться в соответствующей папке. Для этого нет жесткого правила, вы можете выбрать свою собственную папку и правила для хранения файлов.

Скопируйте приведенный ниже HTML-код внутри upload.html.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h1 style="text-align:center;">FortJs File Uploader Demo</h1>
    <br><br>
    <form method="POST" action="/default/upload" enctype="multipart/form-data">
        <div style="text-align: center;">
            <input name="pic" type="file" value="Upload file" />
            <br><br><br>
            <button type="submit">Submit</button>
        </div>
    </form>
</body>
</html>

Приведенный выше код содержит html-форму. Форма содержит ввод типа файла, который будет использоваться для загрузки файла, и кнопку типа отправки для отправки формы.

Создать конечную точку загрузки

Теперь нам нужно вызвать конечную точку из браузера, которая будет отображать представление загрузки.

Добавьте приведенный ниже код в класс DefaultController, расположенный в папке контроллеров.

@Worker(HTTP_METHOD.Get)
@Route("/upload")
async getuploadForm() {
    return viewResult("default/upload.html")
}

Вы можете видеть в приведенном выше коде: - мы используем некоторые декораторы, такие как

«@Worker»: «Worker» добавляет целевой метод к маршрутам, чтобы его можно было вызывать с помощью http-запроса. Мы предоставили значение «HTTP_METHOD.Get» внутри Worker. Это указывает на вызов этого метода только тогда, когда метод http «GET».
«@Route»: метод «Route» используется для настройки маршрута. Мы настроили маршрут на «/upload» с помощью декоратора маршрута.
Если мы не будем настраивать маршрут, то по умолчанию :- он будет принимать имя метода. В нашем случае это будет «getUploadForm».

Я надеюсь, что приведенное выше объяснение проясняет ситуацию. Но если нет, не стесняйтесь задавать любые вопросы в комментариях.

Примечание. Вы можете получить некоторую справочную ошибку из-за того, что переменные недоступны. Пожалуйста, импортируйте их из «fortjs».

Я полагаю, вы не остановили сервер разработки, который мы запустили на этапе настройки проекта. Но если вы остановились, перезапустите снова, выполнив команду — fort-creator start

Теперь давайте посмотрим на нашу форму загрузки. Откройте URL-адрес: - http://localhost:4000/upload

Я знаю, вам может быть интересно. Как создается URL-адрес здесь. Посмотрим -

Есть две части URL-адреса -

один от контроллера: - «по умолчанию». Контроллер «DefaultController» связан с маршрутом «*». Вы можете увидеть это внутри route.ts . Маршрут «*» означает, что если ничего не совпадает, попробуйте меня. Это что-то вроде маршрута по умолчанию.
один от работника: - «загрузить». Мы создали этот URL-адрес с помощью декоратора «Маршрут».

поэтому весь наш URL-адрес http://localhost:4000/upload. Для получения дополнительной информации о маршрутизации, пожалуйста, прочитайте документы по адресу: - http://fortjs.info/tutorial/route/

Теперь нам нужно создать конечную точку для загрузки формы. Скопируйте приведенный ниже код и вставьте внутрь «DefaultController».

@Worker(HTTP_METHOD.Post)
@Route("/upload")
async uploadFile() {
    if (this.file.count > 0) {
        const file = this.file.files[0];
        const pathToSave = Path.join(__dirname, `../upload/${file.originalFilename}`);
        await this.file.saveTo(file.fieldName, pathToSave);
        return textResult("file saved");
    } else {
        return textResult("no files is supplied in the request");
    }
}

В приведенном выше коде -

Мы создали метод «uploadFile» с конечной точкой «/upload», но он будет работать только для HTTP-метода Post. Мы ограничиваем это публикацией метода http, указав параметр «POST» в декораторе Worker.
Мы используем `this.file`. fileявляется членом контроллера, который содержит информацию о файлах в HTTP-запросе.
Мы проверяем количество файлов, используя свойство count .
Свойство files содержит все файлы. Мы захватываем первый файл, используя индекс 0.
Мы сохраняем этот файл в каталоге, используя свойство файла «saveTo». saveTo принимает имя поля ввода, которое в нашем случае «pic» (проверьте в представлении файл типа ввода) и место для сохранения файла. Мы указываем папку загрузки в каталоге проекта для сохранения файла.

Теперь давайте попробуем загрузить файл. Откройте URL-адрес: http://localhost:4000/upload и загрузите файл.

После успешного сохранения вы получите вывод «файл сохранен». Вы можете увидеть загруженный файл внутри каталога загрузки проекта.

Это был конец статьи 😬. Надеюсь, вам понравилось. Не забудьте нажать кнопку хлопка. Спасибо !