node.js - 使用nodejs将图像上传到文件服务器并存储图像的url

Question

我正在使用 MEAN Stack 和 Angular 6 实现一个 Web 应用程序。我想在那里提交一份带有文件上传的表格。应上传 '.png' 文件。

我想将文件保存在不同的文件服务器中并将 URL 发送到图像。目前，我将文件上传到项目中的文件夹中并将图像保存在数据库中(我为此使用了 ng2fileupload 和 multer 。)。然后就这样保存了。

"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAV4AAAFUCAYAAABssFR8AAAK..."

但是我想保存图像网址，并且应该通过该网址检索图像。有谁能解释一下正确的方法吗？

Answer 1

一个月前我遇到了同样的问题，并找到了解决该问题的方法。虽然我没有在应用程序中使用 multer 。

1. 从我的前端，我将向 Node API 端点 /event 发送一个对象，如下所示:-

让 img = {
内容:“数据:image/png;base64，iVBORw0KGgoAAAANSUhEUg...”，
文件名:'yourfile.png'
}

在后端，我使用 Cloudinary存储我的图像(其免费计划允许 10GB 存储)并返回安全的 https URL。因此，使用 npm i cloudinary 安装它，并在 api.js 文件中 require 。并添加以下配置

cloudinary.config({
云名称:'你的应用程序'，
api_key: '你的_KEY',
api_secret: '您的 secret key '
});

最后一步:-(未经过优化的代码)

假设我有一个事件架构，其中包含图像数组，我将在其中存储 cloudinary 返回的 URL。

app.post('/event', (req, res) => {
    try {
        if (req.body.images.length > 0) {

           // Creating new Event instance

            const event = new Event({
                images: [],
            });

           // Looping over every image coming in the request object from frontend
            req.body.images.forEach((img) => {
                const base64Data = img.content.split(',')[1];

            // Writing the images in upload folder for time being 
                fs.writeFileSync(`./uploads/${img.filename}`, base64Data, 'base64', (err) => {
                    if (err) {
                        throw err;
                    }
                });

              /* Now that image is saved in upload folder, Cloudnary picks 
             the image from upload folder and store it at their cloud space.*/
                cloudinary.uploader.upload(`./uploads/${img.filename}`, async (result) => {

                 // Cloudnary returns id & URL of the image which is pushed into the event.images array.
                    event.images.push({
                        id: result.public_id,
                        url: result.secure_url
                    });

                 // Once image is pushed into the array, I'm removing it from my server's upload folder using unlinkSync function
                    fs.unlinkSync(`./uploads/${img.filename}`);

       // When all the images are uploaded then I'm sending back the response
                    if (req.body.images.length === event.images.length) {
                        await event.save();
                        res.send({
                            event,
                            msg: 'Event created successfully'
                        });
                    }
                });
            });
        }
    } catch (e) {
        res.status(400).send(e);
    }
});

P.S.继续为这段代码提出一些优化解决方案here