Verwenden Sie xhr.overrideMimeType, aber zuerst die Serverantwort?

Question

ich eine Base64 codierte Datei von dem Server, um es in einem DataURL bekommen zu verwenden, so verwende ich:

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

So bekomme ich die nicht verarbeiteten Daten, die base64 auszuführen auf codieren.

Aber ich mag auch den MIME-Typen ursprünglich vom Server zurückgegeben bekommen, um meine DataURL zu erklären: var dataUrl = 'data:'+mimetype+';base64,'+b64;

, wenn ich so etwas wie die folgenden versuchen:

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

der Content-Type zurückgegeben wird, ist immer null

Voll Quelle:

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

Sie können responseType von XMLHttpRequest-"blob" oder "arraybuffer" setzen dann FileReader, FileReader.prototype.readAsDataURL() auf response verwenden. Beachten Sie jedoch, onload Ereignis von FileReader gibt Ergebnisse asynchron zurück. Zum Lesen Datei synchron können Sie verwenden Worker und 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); 

---

Bei Chrom Synchron XMLHttpRequest() ist veraltet, siehe https://xhr.spec.whatwg.org/.

Sie Promise im Hauptthread verwenden können data URI der angeforderten Ressource zu erhalten entweder Worker oder wenn FileReaderload Ereignis ausgelöst wird. Oder synchrone XMLHttpRequest() und FileReaderSync() bei Worker Thread verwenden, dann für message Ereignis am Hauptthread hören, verwenden, um Promise Wert zu erhalten.

Hauptthread

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