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对象通过获取来发送以表示后端，中间件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中上传文件的文章，我所能找到的是关于“如何在node中上传一个文件”，“在Express中轻松上传”以及此类博客条目的典型教程。仅说明基础知识，缺乏可扩展性。

因此，我的问题来了：您能为这项任务提出一种优雅的方法/策略，还是关于此的良好信息来源？我想在sequelize模型中的某个位置定义分辨率，并将其用于图像处理以及定义保存图像的文件夹。

谢谢！

使用React，Sequelize和Express的文件上传策略

0 个答案: