xhr.overrideMimeTypeを使用しますが、まずサーバーの応答を取得しますか？

Question

私は私が使用dataURLでそれを使用するためには、サーバーからBase64でエンコードされたファイルを取得したい：

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

だから私は、未処理のデータが上Base64エンコードを実行するために得ます。

が

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

返されたコンテンツタイプが常にある：私は、次のような何かをしようとすると、 var dataUrl = 'data:'+mimetype+';base64,'+b64;

：

しかし、私はまた、MIMEタイプを取得したいが、もともと私のdataURLを宣言するために、サーバから返されましたヌル

完全なソース：

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~"blob"または"arraybuffer"を設定し、次にFileReader,FileReader.prototype.readAsDataURL()をresponseに設定することができます。注：onloadのイベントはFileReaderですが、結果は非同期で返されます。ファイルを読むに同期しますが、クロム同期XMLHttpRequest()で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); 

---

を使用することができ廃止されて、https://xhr.spec.whatwg.org/を参照してください。

あなたはWorker場合やFileReaderloadイベントが送出されたいずれかを使用して、要求されたリソースのdata URIを取得するには、メインスレッドでPromiseを使用することができます。または、同期XMLHttpRequest()とFileReaderSync()をWorkerスレッドで使用し、次に.then()を使用してPromise値を取得すると、messageイベントがメインスレッドで受信されます。

メインスレッド

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