Google cloud storage NextJs，谷歌云存储，在内存中上传/下载对象时出现问题

我对使用blob和GCS还不熟悉，需要一些帮助和对我所写内容的理智检查

我正在使用Nextjs构建一个web应用程序。
用户可以将图像拖到页面上。
我想将图像存储在GCS中。
由于图像只能在web应用程序中查看，因此我认为我希望将图像转换为一个blob并存储该blob。
为了随后显示图像，我只需在需要时从GCS下载blob

我的问题分为两部分：

• A.如何将blob上传到地面军事系统
• B.如何从地面军事系统下载blob

到目前为止，我的努力很接近，但某处出了问题

• blob似乎已上载和下载，但我无法获取 从地面军事系统检索后显示的blob
• 我发现上传前（大小：239536）和下载后（大小：439114）的blob大小存在差异
• 使用转换后，下载的blob无法显示 URL.createObjectURL（）

以下是我到目前为止所做的尝试

A.如何将blob上传到地面军事系统？

客户端
首先，我从组件获取图像数据，并将其转换为blob：

// getImageScaledToCanvas(): This returns a HTMLCanvasElement, it can be made into a data URL or a blob
const imgData = ref.current.getImageScaledToCanvas()  
imgData.toBlob((blob) => saveImageDataToBucket(blob))

记录blob显示：
Blob{大小：239536，键入：“image/png”}

然后我执行一个fetch，将blob发送到我的API：

await fetch(/api/saveImageToBucket,  
{
    method: 'POST',  
    body: blob  
})
.then(response => response.text())
.then(data => console.log('SAVE IMAGE TO BUCKET, fileName=', data))
.catch( err => console.log(err)
)
}

服务器端
API成功执行：

try {
       const bucket = googleCloudStorage.bucket(bucketName)
       const file = bucket.file('myImgBlob)
       const stream = file.createWriteStream({resumable:false, gzip:true})
       stream.write(req.body)
       stream.end()
       res.status(200).send('myImgBlob')
    }
    catch (e) {
        res.status(500).json({error: e})
}

try {
    const bucket = googleCloudStorage.bucket(bucketName)
    const file = bucket.file('myImgBlob')

    // Download a file into memory.
    //
    await file.download()
          .then((data) => {
              const contents = data[0]
              res.status(200).send(contents)
          })
    }
    catch (e) {
        res.status(500).json({error: e})
}

注意：Nextjs使用API路由，该路由提供内置中间件，用于解析传入请求（req）。
req.body是包含按内容类型解析的正文的对象

文件是在GCS（191.39 KB）上创建的，我将文件名发送回客户端。

B.如何从地面军事系统下载blob？

客户端
执行提取以从GCS获取图像blob：

await fetch(`/api/getImageFromBucket`,
{
    method: 'GET',
})
.then(response => response.blob())
.then(blob => {
    const imgBlob = new Blob([blob], {type: 'image/png'})
    setTestImage(imgBlob)
})
.catch( err => console.log(err)
)

记录blob显示： Blob{大小：439114，键入：“image/png”}

然后我只想将blob渲染成一个标记，以检查是否一切正常

const imgUrl=URL.createObjectURL(testImage)
<img src={imgUrl} />

---

您好@ByronCox您能看看社区的另一篇帖子以及云存储开发者提供的答案吗？我相信这可能会让你了解为什么你在展示图像时会遇到问题。嗨@gso_gabriel谢谢你的建议。我知道GCS允许提供存储图像的URL，但我没有存储图像（因为我没有要上传的图像文件）。我有一个斑点。用户将图像拖到页面上，我将图像数据作为HTMLCanvasElement获取。考虑到不需要在本地创建文件，我认为最好的选择是将其转换为Blob？。上传的是Blob。我个人使用Cloudinary来帮助实现这一点，不过对于一些小的东西来说，这可能有些过头了。上传文件时，我会自动将文件发送到gcp存储桶，它们的Node.js+React库允许我非常轻松地获取URL、数据URL（base64编码）和显示图像。您好@ByronCox您能看看社区的另一篇帖子和云存储开发者提供的答案吗？我相信这可能会让你了解为什么你在展示图像时会遇到问题。嗨@gso_gabriel谢谢你的建议。我知道GCS允许提供存储图像的URL，但我没有存储图像（因为我没有要上传的图像文件）。我有一个斑点。用户将图像拖到页面上，我将图像数据作为HTMLCanvasElement获取。考虑到不需要在本地创建文件，我认为最好的选择是将其转换为Blob？。上传的是Blob。我个人使用Cloudinary来帮助实现这一点，不过对于一些小的东西来说，这可能有些过头了。上传文件时，我会自动将文件发送到gcp存储桶，它们的Node.js+React库允许我非常轻松地获取URL、数据URL（base64编码）和显示图像。