从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; 

我还是愿意爱这是否是解决这个问题的正确方式反馈。 （显然，硬编码需要继续。）