Загрузить изображения на файловый сервер и сохранить URL-адрес изображения с помощью nodejs - PullRequest
Новая
       53

Загрузить изображения на файловый сервер и сохранить URL-адрес изображения с помощью nodejs

0 голосов
/ 01 ноября 2018

Я реализую веб-приложение, используя MEAN Stack и Angular 6. Там я хочу отправить форму с файлом загрузки. '.png' файлы должны быть загружены.

Я хочу сохранить файл на другом файловом сервере и отправить URL-адрес изображения. В настоящее время я загружаю файлы в папку в своем проекте и сохраняю изображение в db (для этого я использовал ng2fileupload и multer .). Тогда это сохраняет как это. 

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

Но я хочу сохранить URL-адрес изображения, и изображение должно быть восстановлено по URL-адресу. Кто-нибудь может объяснить правильный метод для этого?

1 Ответ

0 голосов
/ 01 ноября 2018

Месяц назад я столкнулся с той же проблемой и нашел решение этой проблемы. Хотя я не использовал multer в приложении.

  1. Из моего внешнего интерфейса я буду отправлять объект в конечную точку API узла /event, который будет выглядеть следующим образом: -

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

  1. В бэкэнде я использую Cloudinary для хранения своих изображений (бесплатный тариф позволяет хранить 10 ГБ) и возвращает безопасные https URL. Поэтому установите его, используя npm i cloudinary, и укажите в файле api.js. И добавьте следующую конфигурацию

    cloudinary.config({ cloud_name: 'yourapp', api_key: 'YOUR_KEY', api_secret: 'YOUR_SECRET_KEY' });

Последний шаг : - (Не очень оптимизированный код)

Допустим, у меня есть Схема событий , в которой есть массив изображений, где я буду хранить URL-адреса, возвращенные cloudinary. 

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. Давайте предложим какое-нибудь решение по оптимизации для этого кода здесь

...