Стратегия загрузки файлов с помощью React, Sequelize и Express

Question

Я выполняю загрузку файлов в моем стеке: React, Sequelize и Node / Express.

Сейчас я загружаю изображение с помощью <input type="file" /> и устанавливаю его в состояние компонента React.Затем при отправке я создаю new FormData() из этого объекта с функцией, которая пересекает дерево, и, если он находит файл, добавляет его в объект FormData, а также добавляет данные JSON в FormData.

export const createFormData = (object, formData = new FormData()) => {
    var repeat = (object, formData) => {
        for (var key in object) {
            if (object[key] instanceof File || object[key] instanceof Blob) {
                formData.append(key, object[key]);
                object[key] = '';
                return;
            }
            if (object[key] instanceof Array) {
                object[key].map((item) => {
                    repeat(item, formData);
                });
            } else if (object[key] instanceof Object) {
                repeat(object[key], formData);
            }
        }
        return formData;
    };

    repeat(object, formData);

    formData.append('data', JSON.stringify(object));
    return formData;
};

Таким образом, конечный объект FormData будет иметь две записи: файлы

file_img, [object File]

и переданные данные

data: {
    "id": 1,
    "title": "Second project",
    "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras in ex nunc. Sed at nibh non justo interdum venenatis. Mauris semper erat et porta laoreet. Nam blandit, est id sodales sollicitudin, quam nibh blandit sapien, vitae feugiat lacus tellus eget dolor. Praesent libero elit, consectetur in urna ut, cursus rutrum diam. Quisque sed erat sodales, finibus arcu auctor, convallis tortor. Quisque quis felis mi. Etiam elementum elit nec posuere dapibus. Vestibulum at dapibus nisi. Etiam convallis metus imperdiet felis pellentesque molestie. Quisque dui sem, rutrum ac iaculis quis, gravida quis nunc. Cras pulvinar molestie sapien, a tempor dui malesuada non. Duis nec facilisis dui.",
    "img": "/media/images/test-image-6.jpg",
    "file_img": ""
}

Объект FormData отправляется через fetch для экспресс-обработки бэкэнда, гдепромежуточное ПО express-fileupload проверяет наличие файлов в маршрутизаторе и помещает их в req.files.Затем я могу проверить этот объект и сохранить его с помощью функции mv, добавленной в файл промежуточным программным обеспечением.

router.put('/:id', function(req, res, next) {
    var data = JSON.parse(req.body.data);

    models.Projects.update(data, {
        include: [{ model: models.ProjectImages }],
        returning: true,
        plain: true,
        where: {
            id: req.params.id,
        },
    })
        .then(() => {
            for (var key in req.files) {
                req.files
                    ? req.files[key].mv('media/images/' + req.files[key].name)
                    : null;
            }
            return;
        })
etc...

Хорошо, это работает, замечательно.Но это только сохраняет изображение в одной папке, и эта структура не очень масштабируема.

В Django есть способы определения разрешений изображений в моделях, и при загрузке их обрабатывайте их с этими разрешениями - например, с Imagemagick - и сохраняйте их в структуре папок с именем, связанным с этим изображением -например, название модели - и в папках с названием разрешения.Если папка не существует, она создаст ее.

Допустим, у меня есть веб-сайт, где пользователи могут загружать обложки альбомов и голосовать за них.Я хочу, чтобы изображения пользователя были преобразованы в 350, 600 и 1200 ширины и сохранены в media/users/w350, media/users/w600 и media/users/w1200.Та же логика для обложек.

media
├── covers
│   ├── w400
│   │   ├── image1.jpg
│   │   └── image2.jpg
│   ├── w700
│   │   ├── image1.jpg
│   │   └── image2.jpg
│   └── w1200
│       ├── image1.jpg
│       └── image2.jpg
└── users
    ├── w350
    │   ├── image3.jpg
    │   └── image4.jpg
    ├── w600
    │   ├── image3.jpg
    │   └── image4.jpg
    └── w1200
        ├── image3.jpg
        └── image4.jpg

Я читал статьи о загрузке файлов в Express и Node, и все, что я могу найти, - это типичное руководство по «Как загрузить один файл в узел», «Легко«Загрузки в Express», и такие записи в блоге, которые объясняют только основы и не имеют масштабируемости.

Итак, вот мой вопрос: можете ли вы предложить элегантный подход / стратегию для этой задачи или хороший источникинформация об этом?Я хотел бы определить разрешения где-нибудь в моих моделях сиквелизов и использовать их для обработки изображений, а также для определения папки, в которой изображение сохраняется.

Спасибо!