web-dev-qa-db-ja.com

dataURLをjavascriptのファイルオブジェクトに変換する方法は？

AJAXを使用してdataURLを送信するには、dataURLをJavascriptのFileオブジェクトに変換する必要があります。出来ますか？はいの場合、方法を教えてください。

javascriptjqueryfileapi
36
kapv89

Ajaxで送信する必要がある場合は、Fileオブジェクトを使用する必要はありません。BlobおよびFormDataオブジェクトのみが必要です。

補足として、base64文字列をajaxを介してサーバーに送信し、たとえばPHPのbase64_decodeを使用してバイナリサーバー側に変換してみませんか。とにかく、 this answer の標準準拠のコードはChrome 13およびWebKitナイトリーで動作します：

function dataURItoBlob(dataURI) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
    var byteString = atob(dataURI.split(',')[1]);

    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];

    // write the bytes of the string to an ArrayBuffer
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }

    //Old Code
    //write the ArrayBuffer to a blob, and you're done
    //var bb = new BlobBuilder();
    //bb.append(ab);
    //return bb.getBlob(mimeString);

    //New Code
    return new Blob([ab], {type: mimeString});


}

次に、blobを新しいFormDataオブジェクトに追加し、ajaxを使用してサーバーに送信します。

var blob = dataURItoBlob(someDataUrl);
var fd = new FormData(document.forms[0]);
var xhr = new XMLHttpRequest();

fd.append("myFile", blob);
xhr.open('POST', '/', true);
xhr.send(fd);
47
Matthew Caruana Galizia

BlobBuilder は推奨されないため、使用しないでください。古いBlobBuilderの代わりに Blob を使用します。コードは非常に簡潔でシンプルです。

ファイルオブジェクトはBlobオブジェクトから継承されます。両方をFormDataオブジェクトで使用できます。

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}

dataURLtoBlob（）関数を使用して、dataURLをblobに変換し、ajaxをサーバーに送信します。

例えば：

var dataurl = 'data:text/plain;base64,aGVsbG8Gd29ybGQ=';
var blob = dataURLtoBlob(dataurl);
var fd = new FormData();
fd.append("file", blob, "hello.txt");
var xhr = new XMLHttpRequest();
xhr.open('POST', '/server.php', true);
xhr.onload = function(){
    alert('upload complete');
};
xhr.send(fd);

別の方法：

fetch を使用して、URLをファイルオブジェクトに変換することもできます（ファイルオブジェクトにはname/fileNameプロパティがあり、これはblobオブジェクトとは異なります）

コードは非常に短く、使いやすいです。 (works in Chrome and Firefox)

//load src and convert to a File instance object
//work for any type of src, not only image src.
//return a promise that resolves with a File instance

function srcToFile(src, fileName, mimeType){
    return (fetch(src)
        .then(function(res){return res.arrayBuffer();})
        .then(function(buf){return new File([buf], fileName, {type:mimeType});})
    );
}

使用例1：ファイルオブジェクトに変換するだけ

srcToFile(
    'data:text/plain;base64,aGVsbG8Gd29ybGQ=',
    'hello.txt',
    'text/plain'
)
.then(function(file){
    console.log(file);
})

使用例2：ファイルオブジェクトに変換してサーバーにアップロードする

srcToFile(
    'data:text/plain;base64,aGVsbG8Gd29ybGQ=',
    'hello.txt',
    'text/plain'
)
.then(function(file){
    console.log(file);
    var fd = new FormData();
    fd.append("file", file);
    return fetch('/server.php', {method:'POST', body:fd});
})
.then(function(res){
    return res.text();
})
.then(console.log)
.catch(console.error)
;
40
cuixiping

いくつかの研究の後、私はこれに到着しました：

function dataURItoBlob(dataURI) {
    // convert base64 to raw binary data held in a string
    // doesn't handle URLEncoded DataURIs - see SO answer #6850276 for code that does this
    var byteString = atob(dataURI.split(',')[1]);
    // separate out the mime component
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    // write the bytes of the string to an ArrayBuffer
    var ab = new ArrayBuffer(byteString.length);
    var dw = new DataView(ab);
    for(var i = 0; i < byteString.length; i++) {
        dw.setUint8(i, byteString.charCodeAt(i));
    }
    // write the ArrayBuffer to a blob, and you're done
    return new Blob([ab], {type: mimeString});
}

module.exports = dataURItoBlob;
0
EpokK