Упростите управление файлами в Node.js с помощью Sanity CMS: пошаговое руководство для простых операций CRUD

Когда вы прокрутите немного вниз, вы увидите, добавьте Список доступа IP типа 0.0.0.0/0 (это означает, что мы хотим, чтобы кто-нибудь из любой части world, чтобы иметь доступ.) Затем нажмите Добавить запись.

Затем мы будем перенаправлены в раздел Развертывание базы данных. Итак, чтобы создать соединение между нашей базой данных и приложением Node.js, мы нажимаем Подключить.

Затем выберите Драйверы

mongodb+srv://filedb:<password>@cluster0.m3itchu.mongodb.net/?retryWrites=true&w=majority

Мы копируем строку, которая очень похожа на эту. И помним ли мы пароль, который мы дали пользователю? Мы заменяем <password> паролем, который мы передали ранее, который был filedb. Затем в нашем файле env у нас должно быть что-то вроде этого.

MONGODB_URI="mongodb+srv://filedb:filedb@cluster0.m3itchu.mongodb.net/?retryWrites=true&w=majority"

Теперь мы подключаем нашу базу данных к нашему приложению. Итак, перейдите в backend/src/utils/config/database. Это код для создания моста от нашего приложения к MongoDB (нашей базе данных).

// @desc  file path
// /utils/config/database.js

const mongoose = require('mongoose');
const dotenv = require('dotenv');

dotenv.config({ path: '.env' });

const url = `${process.env.MONGODB_URI}`;

const connectDatabase = async () => {
  try {
    await mongoose.connect(url);
    mongoose.set('strictQuery', true);
    console.log(`MONGODB is connected`);
  } catch (error) {
    console.log(error);
  }
};

module.exports = { connectDatabase };

n В общем, этот код устанавливает соединение с базой данных MongoDB с помощью mongoose и экспортирует функцию, которую можно использовать для установления соединения. Параметр strictQuery гарантирует, что запросы проверяются на соответствие заданной схеме, обеспечивая дополнительный уровень целостности данных. Вот разбивка кода:

* Сначала мы импортируем необходимые модули: mongoose и dotenv.

* Затем мы загружаем переменные среды из файла .env с помощью dotenv.config().

* Мы создаем переменную url, содержащую значение переменной среды MONGODB_URI. Это URL-адрес, который мы будем использовать для подключения к нашей базе данных MongoDB.

* Мы определяем асинхронную функцию с именем connectDatabase.

* Внутри функции connectDatabase мы используем блок try/catch, чтобы попытаться подключиться к базе данных с помощью mongoose.connect(). Если соединение установлено успешно, мы записываем в консоль сообщение об успешном соединении.

* Мы устанавливаем для параметра strictQuery объекта mongoose значение true. Это гарантирует, что запросы с полями, не указанными в схеме, будут отклонены, что предотвратит потерю или повреждение данных. * Если соединение не удалось, мы перехватываем ошибку и записываем ее в консоль.

* Наконец, мы экспортируем функцию connectDatabase, чтобы ее можно было использовать в нашем server.js.

Готово!!

Теперь вы знаете, как настроить базу данных MongoDB, развернуть и подключиться к приложению Node.js. Затем мы создаем наш маршрут API и переходим к контроллеру.

Определение нашего маршрута API

// @desc  file path
// routes/file.js

const express = require('express');
const { upload } = require('../utils/services');
const { PostFile } = require('../controller/files');

const router = express.Router();

router.post('/', upload.single('file'), PostFile);

module.exports = router;

Приведенный выше код устанавливает маршрут для обработки загрузки файлов с помощью библиотеки multer и промежуточной функции upload. Функция PostFile отвечает за обработку загруженного файла и создание новой записи файла в базе данных.

Маршрутизатор экспортируется, чтобы его можно было подключить в нашем основном приложении Express и обрабатывать входящие запросы. Вот разбивка кода:

* Первый импорт необходимых модулей: express, upload из ../utils/services и PostFile из ../controller/files.

* Мы создаем экземпляр маршрутизатора Express с помощью express.Router().

* Мы определяем один маршрут для маршрутизатора, используя router.post().

* Маршрут определяется по пути /, что означает, что он будет обрабатывать запросы к корню текущего домена.

* Маршрут использует промежуточную функцию upload для обработки загрузки файлов. Функция upload — это отдельная промежуточная функция, которая определена в модуле ../utils/services и отвечает за обработку и проверку загрузки файлов с помощью multer<. /code> библиотека.

* Промежуточной функции upload передается метод single, который указывает, что мы ожидаем один файл с именем file.

* После загрузки и проверки файла вызывается функция PostFile из ../controller/files. Эта функция отвечает за создание новой записи файла в базе данных и возврат ответа клиенту.

* Наконец, мы экспортируем маршрутизатор, чтобы его можно было смонтировать в нашем основном приложении Express с помощью app.use() в файле server.js.

И мы настроили или определили наш маршрут API, но прежде чем мы перейдем к папке контроллера, нам нужно сначала настроить промежуточное программное обеспечение multer upload.single('file') для обработки загрузки файлов. Чтобы реализовать это, мы идем в /utils/services/index.js

// @desc  file path
// services/index.js

const multer = require('multer');
const path = require('path');

const storageEngine = multer.diskStorage({
  destination: (_req, _, cb) => {
    cb(null, path.join(__dirname, '../../uploads'));
  },
  filename: (_req, file, cb) => {
    cb(null, `${Date.now()}-${file.originalname.replaceAll(' ', '-')}`);
  },
});

const upload = multer({ storage: storageEngine });

module.exports = { upload };

Итак, сначала поговорим о библиотеке Multer, так что если вы новичок, то сможете хотя бы узнать, что это такое и как оно работает.

Multer – это популярная промежуточная библиотека Node.js, которая позволяет обрабатывать multipart/form-data, который обычно используется для загрузки файлов. Он работает с промежуточным программным обеспечением body-parser для анализа данных формы и сохранения загруженных файлов на сервере.

Он предоставляет механизм хранения на диске, который можно использовать для указания того, где на сервере должны храниться загруженные файлы. Вы можете настроить механизм хранения с помощью метода multer.diskStorage(), который принимает объект с двумя свойствами: destination и filename.

Свойство destination указывает каталог или путь, где должны храниться загруженные файлы, а свойство filename указывает, как имя файла должно быть сгенерировано. Я думаю, что этого достаточно для базовых знаний. Чтобы получить дополнительную информацию, см. здесь.

Итак, вот разбивка того, что делает этот код:

* Сначала мы импортируем необходимые модули: multer и path.

* Мы создаем объект storageEngine, используя multer.diskStorage(). Этот объект используется для настройки механизма хранения, используемого Multer для хранения загруженных файлов на сервере. Он имеет два свойства: destination и filename.

* Свойство destination указывает каталог, в котором будут храниться загруженные файлы. В этом случае мы устанавливаем его в каталог uploads относительно текущего файла, используя path.join().

* Свойство filename указывает имя загруженного файла на сервер. Мы используем текущую метку времени и исходное имя файла, чтобы создать уникальное имя для каждого загруженного файла. Мы также заменяем все пробелы в исходном имени файла дефисами, используя replaceAll(), чтобы избежать проблем с пробелами в именах файлов.

* Мы создаем экземпляр промежуточной функции multer, используя ранее созданный объект конфигурации storageEngine.

* Наконец, мы экспортируем объект, содержащий промежуточную функцию upload, чтобы его можно было использовать в наших маршрутах для обработки загрузки файлов.

Подводя итог, можно сказать, что этот код устанавливает промежуточную функцию multer для обработки загрузки файлов. Объект конфигурации storageEngine указывает, где должны храниться загруженные файлы и как должны генерироваться их имена.

Функция промежуточного программного обеспечения upload, созданная с использованием этого объекта конфигурации, экспортируется, чтобы ее можно было использовать в наших маршрутах для обработки загрузки файлов.

Определение структуры схемы API

В этом разделе мы создаем или проектируем структуру данных API в папке model после создания внутри нее файла files.js.

// @desc  file path
// model/files.js
const Mongoose = require('mongoose')

const FileModel = new Mongoose.Schema({
  url: { type: String, unique:true, require: [true, 'This field is required'] },
  size: { type: Number, required: true },
  name: { type: String, require: [true, 'This field is required'] },
  mimeType: { type: String, require: [true, 'This field is required'] },
  extension: { type: String, require: [true, 'This field is required'] },
  cms_id: { type: String,unique:true,  require: [true, 'This field is required'] },
  createdAt: { type: String, require: [true, 'This field is required'] },
  updatedAt: { type: String, require: [true, 'This field is required'] },
});

const File = Mongoose.model('FileModel', FileModel);

module.exports = { File };

Этот код определяет схему для файлов, которые будут загружены в API. Он использует библиотеку Mongoose для определения схемы и создания для нее модели.

Схема включает такие поля, как URL файла, размер, имя, тип MIME, расширение файла. и идентификаторы для системы управления контентом (CMS), которой он принадлежит.

Схема также включает временные метки времени создания и последнего обновления файла. Константа File содержит модель Mongoose для этой схемы, и она экспортируется, чтобы ее можно было использовать в других частях кода, таких как controller.

Подключение Sanity к приложению Node.js

Чтобы подключить нашу Sanity CMS, нам понадобится токен от Sanity, который позволит нам писать в нашу CMS без каких-либо проблемы, а также добавить наш URL сервера, чтобы нас не заблокировала политика CORS; затем после этого мы импортируем токен, создаем файл конфигурации Sanity, а затем создаем соединение.

Вот и весь процесс, так что давайте продолжим. Перейдите к менеджеру Sanity здесь,

Выберите тот, который мы создали ранее в этом руководстве; для меня это sanity_files. Затем скопируйте свой Идентификатор проекта; в данном случае у меня l4h1g3vt. Не забудьте сохранить его, и даже если вы забудете, вы всегда можете найти его здесь.

Следующий шаг — найти и создать токен Sanity, а также установить уровень доступа и CORS.

Итак, нажмите на вкладку API; затем на левой боковой панели нажмите Токены, затем нажмите Добавить токен API

SANITY_SECRET_TOKEN="skuDjxH0Psmf6uwQTgixOMJjfwMFzQx43TmFICReklDASWGtwQAURw9njY8qoA99IV0jVLUTG2M1EwcCFlTk8JGk0bEinuZE01pGSOvDRY5rOYxqDNRKVCRLD02R6QgEkCJdlQpxTqHQKW2ilzJdZ2Hvaykf9bbVaEW1MkqsKXb5ZSgoxHtb"
MONGODB_URI="mongodb+srv://filedb:filedb@cluster0.m3itchu.mongodb.net/?retryWrites=true&w=majority"

// @desc  file path
// utils/config/sanity.js

const { createClient } = require('@sanity/client');

const config = {
  projectId: 'l4h1g3vt',
  dataset: 'production',
  useCdn: true,
  apiVersion: '2023-02-17',
  token: process.env.SANITY_SECRET_TOKEN,
};
const Client = createClient(config);

module.exports = { Client };

Итак, в нашей папке routes файл files.js, который мы видели в PostFile, отвечает за загрузку файлов в / маршруты. Мы создадим наш PostFile в папке controller и сможем сделать наш запрос и получить ответ. р>

Итак, в папке controller мы создаем files.js

// @desc  file path
// controller/files.js

const { File } = require('../model/files');
const fs = require('fs');
const { Client } = require('../utils/config/sanity');

const PostFile = async (request, response) => {
  try {
    const postToSanity = await Client.assets.upload(
      'file',
      fs.createReadStream(`${request.file?.path}`),
      { filename: `${request.file?.originalname.replaceAll(' ', '-')}` }
    );

    const file = await File.create({
      url: postToSanity.url,
      size: postToSanity?.size,
      name: postToSanity?.originalFilename,
      mimeType: postToSanity?.mimeType,
      extension: postToSanity?.extension,
      cms_id: postToSanity?._id,
      createdAt: postToSanity?._createdAt,
      updatedAt: postToSanity?._updatedAt,
    });

    response.json(file);
  } catch (error) {
    console.log(error);
  }
};

module.exports = { PostFile };

Это функция контроллера, отвечающая за обработку запроса POST для загрузки файла на сервер. Вот что делает код:

1. Функция сначала пытается загрузить файл в Sanity, систему управления контентом, используя библиотеку клиента Sanity. Файл считывается из файловой системы сервера с помощью библиотеки fs и передается методу Client.assets.upload вместе с некоторыми метаданными.

2. Если загрузка в Sanity прошла успешно, функция создает новый документ в базе данных MongoDB, используя модель Mongoose File. Документ включает информацию о загруженном файле, такую ​​как его URL, размер, имя, тип MIME, >расширение и некоторые метаданные из Sanity.

3. Наконец, функция отправляет клиенту ответ JSON с вновь созданным документом file.

Если во время этого процесса возникают какие-либо ошибки, они перехватываются и регистрируются в консоли.

Давайте объясним эту сторону хорошо.

Чтобы создать файл любого типа, мы используем Client.assets.upload().

В функции upload() мы ожидаем три (3) параметра: один — тип объекта, который в данном случае является файлом, а затем — содержимое объекта, которое может быть экземпляром файла браузера, большим двоичным объектом, буфером Node.js экземпляром или узлом .js ReadableStream и, наконец, имя файла, которое мы хотим, чтобы файл сохранялся или назывался с помощью URL-адреса файла в нашей CMS. р>

 await Client.assets.upload(
      'file',
      fs.createReadStream(`${request.file?.path}`),
      { filename: `${request.file?.originalname.replaceAll(' ', '-')}` }
    );

Думаю, остальное говорит само за себя.

Сделанный! Вот GIF-файл, чтобы увидеть, как все работает.

Теперь мы знаем, как создать проект Sanity, настроить и подключить к нашему Node.js(Express.js) приложение, а также как настроить и подключить MongoDB к нашему бэкенду, а затем, наконец, как обработать загрузку файла с Sanity CMS, MongoDB, Multer и Node.js(Express.js). р>

Заключение

Надеюсь, вам понравилось. Я обновлю это позже, чтобы включить DELETE, PUT и GET, все вместе, или вы можете немного поэкспериментировать и попробовать реализовать их самостоятельно. А вот и весь код.

Кроме того, я реализую это в этом проекте, который работает здесь.