Как использовать облачное хранилище Google в качестве корзины для хранения изображений пользователей / клиентов в приложении MERN Stack? - PullRequest
Новая
       40

Как использовать облачное хранилище Google в качестве корзины для хранения изображений пользователей / клиентов в приложении MERN Stack?

1 голос
/ 08 октября 2019

Я работаю над симпатичным бланковым приложением в стиле блога, используя mongoDB, express, реакции и ноды. Это позволяет для регистрации пользователей, аутентификации, для авторизованных пользователей в сообщениях CRUD, комментировать и отвечать на комментарии (пока).

У меня есть четко определенная схема (с использованием mongoose), а модель User имеетполе avatar, которое должно быть URI для изображения профиля для этого пользователя. Вот что я сейчас застрял: интеграция хостинга изображений в облачное хранилище Google для изображения профиля, которое загружает пользователь, затем извлечение URL-адреса и сохранение его в user.avatar.

Я пытался посмотреть этобезрезультатно (хотя это было в 4 часа утра после того, как я часами сидел и смотрел на экран). Я действительно не могу найти надежное решение для этого, и я, вероятно, должен упомянуть, что я впервые работаю с загрузкой файлов (я студент, хотя это не домашнее задание).

Честно говоря, любая помощь будет очень признательна.

Редактировать: Я пытался просмотреть документы для Google Cloud Storage.

Ответы [ 2 ]

0 голосов
/ 08 октября 2019

В зависимости от того, где вы хотите, чтобы обработка выполнялась, либо во внешнем интерфейсе с React, либо во внутреннем с Express, вы можете использовать библиотеку клиента Google Cloud для загрузки файлов в GCS, а затем либо использовать Подписанные URL-адреса или URL ссылки, который вы можете найти внутри сведений об объекте в GCS и поместить его внутри тега <img src=... />.

Например, с помощью этой документации вы можете загружать файлынапример:

/ utilities / utils.js 

const { Storage } = require('@google-cloud/storage');
const storage = new Storage();

export const uploadObject = async (bucketName, fileName) => {
  await storage.bucket(bucketName).upload(filename);
}

/ routs / gcs.js 

[...]
const { uploadObject } = require('../utilities/utils');

router.post('/api/uploadAvatar', async (req, res) => {
  await uploadObject(req.body.bucketName, req.body.fileName);
});

Этот пример относится к случаю, когда вы делаететакого рода процессы в бэкэнде, но концепции должны применяться одинаково, если вы решите сделать это в веб-интерфейсе.

Для начала я бы порекомендовал заранее решить, как вы хотите разделить код React.js и код Express.js. Вы хотите использовать подобную микросервисам архитектуру и иметь конечные точки REST для вызова React в бэкэнде (обработка на стороне сервера) для большинства задач и сводить к минимуму обработку на стороне клиента? Или вы просто хотите использовать свой бэкэнд для связи с mongodb и выполнять большинство процессов в React? Существует множество жизнеспособных архитектур, и я приглашаю вас заранее составить детальный план!

0 голосов
/ 08 октября 2019

https://cloud.google.com/nodejs/getting-started/using-cloud-storage содержит некоторую полезную информацию в разделе Upload to Cloud Storage. 

function sendUploadToGCS (req, res, next) {
  if (!req.file) {
    return next();
  }

  const gcsname = Date.now() + req.file.originalname;
  const file = bucket.file(gcsname);

  const stream = file.createWriteStream({
    metadata: {
      contentType: req.file.mimetype
    },
    resumable: false
  });

  stream.on('error', (err) => {
    req.file.cloudStorageError = err;
    next(err);
  });

  stream.on('finish', () => {
    req.file.cloudStorageObject = gcsname;
    file.makePublic().then(() => {
      req.file.cloudStoragePublicUrl = getPublicUrl(gcsname); // this will be the URL you will use in your web pages
      next();
    });
  });

  stream.end(req.file.buffer);
}

Пример также использует Multer , который является промежуточным программным обеспечением для Express, для обработки загрузки файлов

...