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);

返回的content-type始终为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

您可以将responseType XMLHttpRequest设置为"blob"或"arraybuffer"，然后使用FileReader，FileReader.prototype.readAsDataURL() response。虽然注意，onload FileReader事件异步返回结果。要同步阅读文件，您可以使用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);

在铬同步XMLHttpRequest()已弃用，请参阅https://xhr.spec.whatwg.org/。

您可以在主线程中使用Promise使用data URI或在调度Worker FileReader事件时获取所请求资源的load。或者在XMLHttpRequest()线程使用同步FileReaderSync()和Worker，然后在主线程中侦听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

使用xhr.overrideMimeType但首先得到服务器响应？

1 个答案: