createObjectURL 错误:`参数必须是 Blob 的实例。收到 Blob 的实例`

2023-11-27

我有一条快速路线,其中包含以下内容:

let result = await fetch("http://someurl");
result = await result.blob();
console.log(result)
const img = URL.createObjectURL(result);

这会产生以下错误(第 4 行):

TypeError: The "obj" argument must be an instance of Blob. Received an instance of Blob

这里发生了什么?

如果有帮助,console.log 的结果是:

Blob {
  [Symbol(type)]: 'image/png',
  [Symbol(buffer)]: <Buffer 89 50 4e  ... 481501 more bytes>
}

并且获取路由转到另一个调用的 Express 应用程序res.sendFile(myfilepath)


服务器端相当于:

let result = await fetch("http://someurl");
result = await result.blob();
console.log(result)
const img = URL.createObjectURL(result);

is

let result = await fetch("http://someurl");
result = await result.arrayBuffer();
console.log(result)
const img = Buffer.from(result).toString("base64"));

然后图像在客户端呈现类似于:

<img src="data:image/png;base64, <%= img %>">

对于本例,使用 EJS;这里的重点是将图像数据转换为 Base-64 编码文本,然后可以使用图像数据 URI 进行渲染(https://css-tricks.com/data-uris/)

请注意,只有当获取图像数据需要某种服务器端身份验证时才需要这种跳环,就像在大多数情况下您只需这样做:

<img src="http://someurl">

我有以下(精简)代码,其中图像只有在经过身份验证后才能访问:

export function getImage({ imageUrl, token }) {
  return fetch(`${apiServer}/${imageUrl}`, {
    headers: {
      Authorization: `Bearer ${token}`,
    },
  })
    .then((response) => response.arrayBuffer())
    .then((blob) => Buffer.from(blob).toString("base64"));
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

createObjectURL 错误:`参数必须是 Blob 的实例。收到 Blob 的实例` 的相关文章

随机推荐