Question

我将我的图像存储在firebase存储中，现在我想在我的页面上显示它

const firebase = require('./../config/firebase');
const gcloud = require('google-cloud');
const fs = require('fs');

var storage = gcloud.storage({
projectId: 'test-a1e76',
keyFilename: 'test-a1e76-firebase-adminsdk-7111d-124guy123eac.json',
});

var bucket = storage.bucket('test-a1e76.appspot.com');

这就是我的设置。

这是我的get方法。

router.get('/image', function (req,res) {

    var remoteReadStream = bucket.file('download.png').createReadStream();
    var localWriteStream = fs.createWriteStream('/images/watchers/2jIompF9FUZ6A4LnpBcbpHWw8dx2/download.png');
    var ss = remoteReadStream.pipe(localWriteStream);
    res.send(ss);
})

我只是尝试了这个，因为它写在npm docs.of google-cloud中。我试着将它放在get方法中，看它是如何工作的。

之后我得到了这个错误..

Error: ENOENT: no such file or directory, open 'C:\images\test\2jIoasd24zd13ase121s2Ww8dx2\download.png'

这是我的ajax get方法

 $.ajax({
    url:'/user/image',
    type:'GET',
    success:function(data){
      console.log(data.path);

    }
  });

任何人都可以在这里指导我如何从firebase存储中检索图像并将其显示在我的网页上？使用这个google-cloud npm？因为我读了一些线程，节点js不支持firebase-storage，所以他们改用google-cloud。

Answer 1

在带有节点的firebase函数中，我使用下面的代码，它们运行正常

How do I upload a base64 encoded image (string) directly to a Google Cloud Storage bucket using Node.js?

const uuidv4 = require('uuid/v4');
const uuid = uuidv4();

    const os = require('os')
    const path = require('path')
    const cors = require('cors')({ origin: true })
    const Busboy = require('busboy')
    const fs = require('fs')
    var admin = require("firebase-admin");


    var serviceAccount = {
        "type": "service_account",
        "project_id": "xxxxxx",
        "private_key_id": "xxxxxx",
        "private_key": "-----BEGIN PRIVATE KEY-----\jr5x+4AvctKLonBafg\nElTg3Cj7pAEbUfIO9I44zZ8=\n-----END PRIVATE KEY-----\n",
        "client_email": "xxxx@xxxx.iam.gserviceaccount.com",
        "client_id": "xxxxxxxx",
        "auth_uri": "https://accounts.google.com/o/oauth2/auth",
        "token_uri": "https://oauth2.googleapis.com/token",
        "auth_provider_x509_cert_url": "https://www.googleapis.com/oauth2/v1/certs",
        "client_x509_cert_url": "https://www.googleapis.com/robot/v1/metadata/x509/firebase-adminsdk-5rmdm%40xxxxx.iam.gserviceaccount.com"
      }

    admin.initializeApp({
        credential: admin.credential.cert(serviceAccount),
        storageBucket: "xxxxx-xxxx" // use your storage bucket name
    });


    const app = express();
    app.use(bodyParser.urlencoded({ extended: false }));
    app.use(bodyParser.json());
app.post('/uploadFile', (req, response) => {
    response.set('Access-Control-Allow-Origin', '*');
    const busboy = new Busboy({ headers: req.headers })
    let uploadData = null
    busboy.on('file', (fieldname, file, filename, encoding, mimetype) => {
        const filepath = path.join(os.tmpdir(), filename)
        uploadData = { file: filepath, type: mimetype }
        console.log("-------------->>",filepath)
        file.pipe(fs.createWriteStream(filepath))
      })

      busboy.on('finish', () => {
        const bucket = admin.storage().bucket();
        bucket.upload(uploadData.file, {
            uploadType: 'media',
            metadata: {
              metadata: { firebaseStorageDownloadTokens: uuid,
                contentType: uploadData.type,
              },
            },
          })

          .catch(err => {
            res.status(500).json({
              error: err,
            })
          })
      })
      busboy.end(req.rawBody)
   });




exports.widgets = functions.https.onRequest(app);

Answer 2

我是这样工作的。

var admin = require("firebase-admin");
...
app.get('/picture', async (req, res) => {
  const fileRef = admin.storage().bucket().file('03aead66e97f0d50ce549b6fffc1b6d7.svg');
  const hash = await fileRef.download()
  res.contentType(fileRef.metadata.contentType);
  res.end(hash[0], 'binary');
});

Answer 3

你只需要显示图像，对吗？有一种肮脏的方式。

1-在您的存储桶上传一个图像e单击它（在Firebase控制台中）。

2-在屏幕右侧显示有关您文件的信息。

3-查找“下载URL”（或类似内容）并单击它。

4-这是一个网址示例：

https://firebasestorage.googleapis.com/v0/b/coffee-a7e8c.appspot.com/o/coffeeTrue.png?alt=media&token=7f44e575-414d-4d18-8f39-c94a23f6e014

如您所见，有一种模式： https://firebasestorage.googleapis.com/v0/b/NAME_FILE?alt=media&token=YOUR_TOKEN

获取您的令牌，现在您可以显示您的存储桶上的所有图像，只传递文件名和您的令牌（如此示例）。

这很有效，因为Firebase为您的服务提供了Rest API。

请记住：请先执行身份验证或设置开放规则。

示例：每个人都可以阅读。只有auth用户才能写。

service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read: if request.auth == null;
      allow write: if request.auth != null;
    }
  }
}

如何从firebase存储中检索图像并使用google-cloud和node js将其显示在网页上

3 个答案: