1

我正在使用MEAN Stackand实现一个网络应用程序Angular 6。在那里我想提交一个带有文件上传的表单。'.png'文件应该被上传。

我想将文件保存在不同的文件服务器中并将 url 发送到图像。目前我将文件上传到我的项目中的一个文件夹并将图像保存在 db 中（我曾经使用ng2fileupload过multer。）。然后它像这样保存。

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

但我想保存图像 url，并且图像应该由 url 检索。有谁可以解释一个正确的方法？

4

1 回答 1

0

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

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

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

  1. 在后端，我使用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);
    }
});

PS继续在这里为这段代码提出一些优化解决方案

于 2018-11-01T07:25:33.067 回答