Angular：如何从图像文件创建 Blob？答案

【问题标题】：Angular: how to create Blob from image file?Angular：如何从图像文件创建 Blob？
【发布时间】：2020-07-27 10:47:53
【问题描述】：

我正在尝试预览从输入中获得的一些图像文件，示例文件如下所示：

所以我发现要显示文件的预览首先我必须将此文件更改为 Blob，我正在寻找解决方案，我发现了这样的东西：

  private imageFileToBlob(imageFile) {
    const splitedData = imageFile.image.split(',');
    const mime = splitedData[0].match(/:(.*?);/)[1];
    const bstr = atob(splitedData[1]);
    let n = bstr.length;
    const u8arr = new Uint8Array(n);
    while (n--) {
      u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type: mime});
  }

但我不知道如何编辑它以使其适合我的输入文件类型。有人可以帮助/解释它应该如何解决吗？

我相信当我得到 Blob 文件时，我可以将它直接放入<img [src]='blobHere'>？

谢谢！

【问题讨论】：

您是否考虑过使用URL.createObjectURL 而不是blob？我假设您希望在将图像上传到后端时显示图像的预览，对吧？
每个File 已经是Blob 的一个实例。您可以将File 直接传递给URL.createObjectURL()，它会为您提供一个简短的URI，您可以将其用作图像src。
好的，所以我尝试使用createObjectUrl()，但出现unsafe:blob:http://localhost:4202/3e4b33a3-f7fd-4690-920b-a3e89625fda3 net::ERR_UNKNOWN_URL_SCHEME 错误。

标签： javascript html angular blob

【解决方案1】：

试试这个：

private imageFileToBlob(imageFile) {
    return URL.createObjectURL(imageFile);
}

【讨论】：