Question

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

我想将文件保存到其他文件服务器中，然后将url发送到图像。当前，我将文件上传到项目中的文件夹中，并将图像保存在db中（我使用了ng2fileupload和{{1 }} 为了那个原因。）。然后这样保存。

multer

但是我要保存图像URL，并且应该通过URL检索图像。有人能解释一个合适的方法吗？

Answer 1

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

从前端，我将向Node API端点/event发送一个对象，该对象看起来像：-

let img = { content: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUg...", filename: 'yourfile.png' }

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

cloudinary.config({ cloud_name: 'yourapp', api_key: 'YOUR_KEY', api_secret: 'YOUR_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

提出一些优化解决方案

将图像上传到文件服务器，并使用nodejs将URL存储到图像

1 个答案: