javascript - 将 FilePathResult ASP.net MVC 发送的 http 响应中的二进制图像数据转换为 base64 字符串

Question

使用 FilePathResult 从 ASP.Net MVC 发送图像文件。当收到 http 响应时，如何在客户端(Web 浏览器)将此图像转换为 Base64 字符串。它在response.data对象中以原始形式显示数据。我试过了

var blob = new Blob([response.data], { type: 'image/jpeg' });
var reader = new FileReader();
reader.onloadend = function () {
     var base64data = reader.result;
     console.log(base64data);
}
reader.readAsDataURL(blob);

Answer 1

当您使用 ajax 将二进制文件作为文本获取时，浏览器将尝试解析字符集并更改您的数据。

您必须以 blob 形式获取数据，以避免告诉他们不要这样做

function getBase64(blob) {
  var blob = xhr.response
  var reader = new FileReader();
  reader.onload = function () {
       var base64data = reader.result;
       console.log(base64data);
  }
  reader.readAsDataURL(blob);
}

var xhr = new XMLHttpRequest()
xhr.open('GET', '/myfile.png', true)
xhr.responseType = 'blob'  // get data as blob
xhr.onload = function() {
  getBase64(xhr.response)
}
xhr.send()

// or if you are using fetch
fetch('/myfile.png')
  .then(function(res) {
    res.blob() // get data as blob
    .then(getBase64)
  })