javascript - 使用 xhr.overrideMimeType 但先获取服务器响应？

Question

我想从服务器获取一个 Base64 编码的文件，以便在 dataURL 中使用它，所以我使用:

xhr.overrideMimeType("text/plain; charset=x-user-defined");

所以我得到未处理的数据来执行 base64 编码。

但我也想得到服务器最初返回的mimetype来声明我的dataURL:var dataUrl = 'data:'+mimetype+';base64,'+b64;

当我尝试如下操作时:

var xhr = new XMLHttpRequest();
xhr.open("GET", url, false);
var mimetype = xhr.getResponseHeader('content-type');
xhr.overrideMimeType("text/plain; charset=x-user-defined");
xhr.send(null);

返回的内容类型始终为空

完整来源:

function getFileDataUrl(link,mimetype)
{
  var url = location.origin+link;
  var getBinary = function (url) 
  {
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, false);
    if(mimetype == null)
    {
        mimetype = xhr.getResponseHeader('content-type');
        console.log('mimetype='+mimetype);
    }
    xhr.overrideMimeType("text/plain; charset=x-user-defined");
    xhr.send(null);
    return xhr.responseText;
   };
   var bin = getBinary(url);
   var b64 = base64Encode(bin);
   var dataUrl = 'data:'+mimetype+';base64,'+b64;
   return dataUrl;
}
var dataUrl = getFileDataUrl(link,null);

Answer 1

您可以将 XMLHttpRequest 的 responseType 设置为 "blob" 或 "arraybuffer" 然后使用 FileReader，FileReader.prototype.readAsDataURL() 响应。请注意，FileReader 的onload 事件会异步返回结果。要同步读取文件，您可以使用 Worker 和 FileReaderSync()

var reader = new FileReader();
reader.onload = function() {
  // do stuff with `reader.result`
  console.log(reader.result);
}
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.responseType = "blob";
xhr.onload = function() {
  reader.readAsDataURL(xhr.response);
}
xhr.send(null);

---

在 chromium 同步 XMLHttpRequest() 已弃用，参见 https://xhr.spec.whatwg.org/ .

您可以在主线程中使用 Promise 来使用 Worker 或 FileReader 获取所请求资源的 data URI > load 事件被调度。或者在Worker线程使用同步XMLHttpRequest()和FileReaderSync()，然后在主线程监听message事件, 使用 .then() 获取 Promise 值。

主线程

var worker = new Worker("worker.js");
var url = "path/to/resource";

function getFileDataUrl(url) {
  return new Promise(function(resolve, reject) {        
    worker.addEventListener("message", function(e) {
      resolve(e.data)
    });
    worker.postMessage(url);
  })
}

getFileDataUrl(url)
.then(function(data) {
  console.log(data)
}, function(err) {
  console.log(err)
});

worker.js

var reader = new FileReaderSync();
var request = new XMLHttpRequest();

self.addEventListener("message", function(e) {
  var reader = new FileReaderSync();
  request.open("GET", e.data, false);
  request.responseType = "blob";
  request.send(null);
  self.postMessage(reader.readAsDataURL(request.response));
});

plnkr http://plnkr.co/edit/gayWpkTVydmKYMnPr3jD?p=preview