Question

因此，这肯定比我必须努力解决的更多。我让用户现在私下存储图像，因此我需要能够使用Authorization标头请求图像。 <img>不允许这样做（不，我不想在请求中添加?token=xxx）。因此，我必须使用axios.get加载图像，然后将图像的二进制表示形式转换为Base64，然后使用Data URI嵌入图像。很简单，对吧？

所以我要做的是img.src=data:image/jpeg;base64,xxxxxxxxx，其中所有x：s都应替换为图像的Base64表示形式。我尝试使用btoa，但在Base64中只有大约20个字符。图片在700Kb上。

btoa不能处理这么大的图像吗？
还有其他方法吗？

我不使用browserify或webpack，所以我不想使用Buffer来解决这个问题。

编辑：我收到的第一条评论实际上是对我问题的正确答案，只是做了很小的调整。

  getBase64(arrayBuffer) {
    var reader = new FileReader();
    var that = this;
    reader.onloadend = function () {
      that.mainImage = reader.result;
    };

    reader.readAsDataURL(new Blob([new Uint8Array(arrayBuffer)], { type: 'image/jpeg' }));
  }

我添加了一个Blob来包含我的ArrayBuffer，因此我必须进行转换 ArrayBuffer到UInt8Array，以便Blob能够在其上进行迭代。

在我的Vue模板中

<img class="responsive-img" :src="mainImage"></img>

Answer 1

尝试一下。

getBase64(file) {
        var reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = function () {
          console.log(reader.result);
        };
      },

this.getBase64(this.selected_file);

无法创建二进制JPEG的Base64表示形式

1 个答案: