将Next.js中的base64图像上传到Azure存储

Question

我已经尝试过针对此问题的所有其他“欺骗”，但似乎其中许多都已经过时了。以下代码“成功”运行并上传图像并正确设置 mimetype，但它不会呈现为图像。 Base64 内容位于文件内，但不会在任何图像编辑器或浏览器中呈现。

这是上传后图像数据的样子：

{
  type: 'Buffer',
  data: [
    137,  80,  78,  71,  13,  10,  26,  10,   0,   0,   0,  13,
     73,  72,  68,  82,   0,   0,   4,  56,   0,   0,   3,  96,
      8,   6,   0,   0,   0, 201, 106, 216, 155,   0,   0,   0,
      9, 112,  72,  89, 115,   0,   0,  11,  19,   0,   0,  11,
     19,   1,   0, 154, 156,  24,   0,  15, 227,   3,  73,  68,
     65,  84, 120, 156, 204, 253, 119, 184, 157,  85, 181, 254,
     15, 223, 171, 239, 222,  83,   8, 189,  10, 130, 224,   1,
     81, 144,  42, 136, 132, 162,  71,  81, 241, 128, 128, 160,
    210, 148,  46,  82,
    ... 1041133 more items
  ]
}

这是我的代码：

const data = req.files?.file.data.toString('base64');
const uploadBlobResponse = await blockBlobClient.upload(data, data.length, { blobHTTPHeaders: { blobContentType: body.mimeType }});

我也尝试过使用

uploadData

但失败并出现以下错误：

上传文件时出错 TypeError [ERR_INVALID_ARG_TYPE]：第一个参数必须是字符串类型或者 Buffer、ArrayBuffer、Array 或类数组对象的实例。收到未定义

我觉得很搞笑，因为如果我这样做

typeof data

它会返回一种

string

提前致谢，因为此时我已经用头撞墙几个小时了。

Answer 1

Azure Blob 存储不是这样工作的。本质上，blob 内容是您上传的数据。在您的情况下，您将二进制数据转换为 base64 字符串并上传该字符串，以便存储的 blob 是字符串。

您可以做一些事情：

• 存储二进制数据。您可以简单地将数据存储为字节数组，而不是将数据转换为 Base64 编码的字符串。然后您就可以使用类似

  <img src="your-blob-url" />

  的内容来显示图像。
• 读取应用程序中的数据。如果您想将数据存储为 base64 编码字符串，那么为了显示该数据，您需要读取 blob 的内容，然后使用类似

  <img src="data:blob-content-type;base64,your-base64-encoded-content" />

  的内容。