在浏览器中查看而非下载 Google Cloud Storage 文件答案

【问题标题】：View and not download Google Cloud Storage files in browser在浏览器中查看而非下载 Google Cloud Storage 文件
【发布时间】：2020-06-21 11:33:33
【问题描述】：

我正在使用 NodeJs/express 创建一个 POST api 端点以将文件上传到谷歌云存储并返回一个公共 URL，如下所示： https://storage.googleapis.com/[BUCKET_NAME]/[OBJECT_NAME]

上传完成后，我得到 URL，当我打开它时，文件被直接下载（图像、pdf 等...）

有没有办法在浏览器中查看和打开？

这是我的上传功能：

const uploadImage = (file) => new Promise((resolve, reject) => {
  const { originalname, buffer } = file

  const blob = bucket.file(originalname.replace(/ /g, "_"))
  const blobStream = blob.createWriteStream({
    resumable: false
  })

  blobStream.on('finish', () => {
    const publicUrl = format(
      `https://storage.googleapis.com/${bucket.name}/${blob.name}`
    )
    resolve(publicUrl)
  })
  .on('error', () => {
    reject(`Unable to upload image, something went wrong`)
  })
  .end(buffer)

})

谢谢

【问题讨论】：

标签： node.js express google-cloud-platform google-cloud-storage multer

【解决方案1】：

如果 URL 看起来像上面的代码，https://storage.googleapis.com/bucketName/objectName，浏览器应该可以直接查看它，只要满足几个条件：

对象的 contentType 设置得当。如果您不指定类型，则默认为application/octet-stream，Web 浏览器可能会决定只下载此类对象而不是以某种形式显示它。
对象的元数据不会覆盖 contentDisposition。通过将该属性设置为attachment; filename=foo.txt 之类的内容，可以强制将对象作为附件下载。
对象可以公开查看，或者在 GET 请求中传递了适当的凭据。这不是默认设置。上传对象时，您需要明确注意 ACL 应允许组 allUsers 读取权限。或者，您可以设置存储桶的默认对象 ACL 属性以包含该权限。

在您的情况下，对象正在成功下载，因此不是 ACL 问题，如果您不知道 contentDisposition 设置，则可能是问题 #1。确保为对象指定合理的内容类型。

例子：

const blobStream = blob.createWriteStream({
  resumable: false
  contentType: "text/html"
})

【讨论】：