☰

ファイル入力フォームからのように、Base64 文字列を JavaScript ファイル オブジェクトに変換するにはどうすればよいでしょうか? 質問する

tag-icon • tag-icon javascript html forms file base64
ファイル入力フォームからのように、Base64 文字列を JavaScript ファイル オブジェクトに変換するにはどうすればよいでしょうか? 質問する

ファイルから抽出された Base64String (例: "AAAA....~") を JavaScript ファイル オブジェクトに変換します。

私が言っている JavaScript ファイル オブジェクトは次のコードのようなものです:

HTML:

<input type="file" id="selectFile" >

JS:

$('#selectFile').on('change', function(e) {
  var file = e.target.files[0];

  console.log(file)
}

'file' 変数は JavaScript ファイル オブジェクトです。したがって、base64 文字列を JavaScript ファイル オブジェクトに変換したいと思います。

HTML ファイル入力フォームを使用せずに、base64 文字列 (ファイルから他のアプリによってエンコードされたもの) をデコードしてファイル オブジェクトを取得したいだけです。

ありがとう。

ベストアンサー1

方法1:dataURL に対してのみ機能し、他のタイプの URL に対しては機能しません。

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

//Usage example:
var file = dataURLtoFile('data:text/plain;base64,aGVsbG8=','hello.txt');
console.log(file);

方法2:あらゆるタイプの URL (http URL、dataURL、blobURL など) で機能します。

// return a promise that resolves with a File instance
function urltoFile(url, filename, mimeType){
    if (url.startsWith('data:')) {
        var arr = url.split(','),
            mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[arr.length - 1]), 
            n = bstr.length, 
            u8arr = new Uint8Array(n);
        while(n--){
            u8arr[n] = bstr.charCodeAt(n);
        }
        var file = new File([u8arr], filename, {type:mime || mimeType});
        return Promise.resolve(file);
    }
    return fetch(url)
        .then(res => res.arrayBuffer())
        .then(buf => new File([buf], filename,{type:mimeType}));
}

//Usage example:
urltoFile('data:text/plain;base64,aGVsbG8=', 'hello.txt','text/plain')
.then(function(file){ console.log(file);});

おすすめ記事