從Node.js中的Google雲端存儲中檢索圖像時沒有公開URL

Question

我試圖將圖像返回給我的用戶以在DOM上查看而不創建公共圖像鏈接（此路由在獲取圖像之前由我的服務器的auth保護）。這是我到目前爲止所嘗試過的，但這可能是錯誤的做法。

我使用Node.js指南來追蹤Google Cloud Storage，將圖片上傳添加到我的項目中。我現在可以上傳工作，圖像保存在Google雲端存儲中。該指南演示如何檢索公開網址：

https://cloud.google.com/nodejs/getting-started/using-cloud-storage

我試圖用文件而不是流，使我的圖片不公開，公衆的URL。我猜它會看起來類似於這個倉庫中的流： https://github.com/GoogleCloudPlatform/google-cloud-node

但我試圖返回HTTP響應的圖像，而不是簡單地將它們存儲在我的文件系統本地。

我的客戶端Javascript得到的響應看起來像一個巨大的blob。 ����JFIF���Photoshop 3.08BIM�元數據使我認爲這實際上是正確的圖像，但我不確定如何恢復它看起來像圖像。

這是我的節點服務器文件。上傳到Google雲端存儲，/post正在運行，我可以看到要添加的圖像。

的/get正在返回什麼樣子，似乎喜歡它是我想要的圖像（就像一個奇怪的斑點，我不知道如何轉換）一個巨大的斑點。

我的代碼如下所示：

var express = require('express'); 
var router = express.Router(); 
const Multer = require('multer'); 
const multer = Multer({ 
    storage: Multer.memoryStorage(), 
    limits: { 
    fileSize: 5 * 1024 * 1024 // no larger than 5mb, you can change as needed. 
    } 
}); 

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

const storage = Storage({ 
    keyFilename: 'server/firebase-service-account.json', 
    projectId: process.env.FIREBASE_PROJECT_ID 
}); 

const bucket = storage.bucket(process.env.FIREBASE_STORAGE_BUCKET); 

// Process the file upload and upload to Google Cloud Storage. 
router.post('/', multer.single('file'), (req, res, next) => { 
    console.log('req.body', req.body); 
    console.log('req.file', req.file); 
    if (!req.file) { 
    res.status(400).send('No file uploaded.'); 
    return; 
    } 

    // Create a new blob in the bucket and upload the file data. 
    const blob = bucket.file(req.file.originalname); 
    const blobStream = blob.createWriteStream(); 

    blobStream.on('error', (err) => { 
    next(err); 
    return; 
    }); 

    blobStream.on('finish',() => { 
    res.status(200).send('The image has been successfully uploaded to google cloud storage'); 
    }); 

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

router.get('/', function (req, res, next) { 
    var stream = bucket.file('Toast.jpg').createReadStream(); 

    stream.pipe(res); 

    stream.on('data', function (data) { 
    res.write(data); 
    }); 

    stream.on('error', function (err) { 
    console.log('error reading stream', err); 
    }); 

    stream.on('end', function() { 
    res.set({ 
     "Content-Disposition": 'attachment; filename="Toast.jpg"', 
     "Content-Type": 'image/jpg' 
    }); 
    res.end(); 
    }); 
}); 

module.exports = router; 

是如此接近？有沒有更好的方法來保護我的圖像與我的身份驗證？

Answer 1

我正在考慮錯誤的方式。我需要將我的<img src=""路由到正確的位置。

HTML

<img src="/uploads/1234"> 

服務器節點

var express = require('express'); 
var router = express.Router(); 
const Multer = require('multer'); 
const multer = Multer({ 
    storage: Multer.memoryStorage(), 
    limits: { 
    fileSize: 5 * 1024 * 1024 // no larger than 5mb, you can change as needed. 
    } 
}); 

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

const storage = Storage({ 
    keyFilename: 'server/firebase-service-account.json', 
    projectId: process.env.FIREBASE_PROJECT_ID 
}); 

const bucket = storage.bucket(process.env.FIREBASE_STORAGE_BUCKET); 

// Process the file upload and upload to Google Cloud Storage. 
router.post('/', multer.single('file'), (req, res, next) => { 
    console.log('req.body', req.body); 
    console.log('req.file', req.file); 
    if (!req.file) { 
    res.status(400).send('No file uploaded.'); 
    return; 
    } 

    // Create a new blob in the bucket and upload the file data. 
    const blob = bucket.file(req.file.originalname); 
    const blobStream = blob.createWriteStream(); 

    blobStream.on('error', (err) => { 
    next(err); 
    return; 
    }); 

    blobStream.on('finish',() => { 
    res.status(200).send('The image has been successfully uploaded to google cloud storage'); 
    }); 

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

router.get('/:imageId', function (req, res, next) { 
    var stream = bucket.file('Toast.jpg').createReadStream(); 

    res.writeHead(200, {'Content-Type': 'image/jpg' }); 

    stream.on('data', function (data) { 
    res.write(data); 
    }); 

    stream.on('error', function (err) { 
    console.log('error reading stream', err); 
    }); 

    stream.on('end', function() { 
    res.end(); 
    }); 
}); 

module.exports = router; 

我還是願意愛這是否是解決這個問題的正確方式反饋。 （顯然，硬編碼需要繼續。）