web-dev-qa-db-ja.com

Base64 Stringをファイル入力フォームのようにjavascriptファイルオブジェクトに変換する方法は？

ファイル（例： "AAAAA ....〜"）から抽出したBase64Stringを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文字列（ファイルから他のアプリによってエンコードされた）をデコードして、ファイルオブジェクトを取得したいだけです。

ありがとうございました。

javascripthtmlformsfilebase64
15
Dayamre

方法1：はdataURLでのみ機能し、他のタイプのURLでは機能しません。

function dataURLtoFile(dataurl, filename) {
    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 File([u8arr], filename, {type:mime});
}

//Usage example:
var file = dataURLtoFile('data:text/plain;base64,aGVsbG8Gd29ybGQ=', '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){
    return (fetch(url)
        .then(function(res){return res.arrayBuffer();})
        .then(function(buf){return new File([buf], filename, {type:mimeType});})
    );
}

//Usage example:
urltoFile('data:text/plain;base64,aGVsbG8Gd29ybGQ=', 'hello.txt', 'text/plain')
.then(function(file){
    console.log(file);
})
43
cuixiping
const url = 'data:image/png;base6....';
fetch(url)
  .then(res => res.blob())
  .then(blob => {
    const file = new File([blob], "File name")
  })

Base64 String-> Blob-> File。

17
Preethi Kumar

非常によく似た要件がありました（外部xmlインポートファイルからbase64エンコードイメージをインポートします。 xml2json-light library を使用してjsonオブジェクトに変換した後、上記のcuixipingの答えから得た洞察を活用できました。着信b64エンコード画像をファイルオブジェクトに変換します。

const imgName = incomingImage['FileName'];
const imgExt = imgName.split('.').pop();
let mimeType = 'image/png';
if (imgExt.toLowerCase() !== 'png') {
    mimeType = 'image/jpeg';
}
const imgB64 = incomingImage['_@ttribute'];
const bstr = atob(imgB64);
let n = bstr.length;
const u8arr = new Uint8Array(n);
while (n--) {
  u8arr[n] = bstr.charCodeAt(n);
}
const file = new File([u8arr], imgName, {type: mimeType});

着信jsonオブジェクトには、xml2json-lightによる変換後の2つのプロパティがありました。FileNameと_ @ ttribute（着信要素の本文に含まれるb64画像データです。）着信FileName拡張子に基づいてmime-typeを生成する必要がありました。 jsonオブジェクトからすべての部分を抽出/参照したら、ブラウザ要素から生成されたファイルオブジェクトを期待していた既存のクラスと完全に互換性のある新しいFileオブジェクトを生成するのは簡単なタスクでした。

これが他の人のドットをつなげるのに役立つことを願っています.

0
JHBSA

注意喚起、

ジャバスクリプト

<script>
   function readMtlAtClient(){

       mtlFileContent = '';

       var mtlFile = document.getElementById('mtlFileInput').files[0];
       var readerMTL = new FileReader();

       // Closure to capture the file information.
       readerMTL.onload = (function(reader) {
           return function() {
               mtlFileContent = reader.result;
               mtlFileContent = mtlFileContent.replace('data:;base64,', '');
               mtlFileContent = window.atob(mtlFileContent);

           };
       })(readerMTL);

       readerMTL.readAsDataURL(mtlFile);
   }
</script>

HTML

    <input class="FullWidth" type="file" name="mtlFileInput" value="" id="mtlFileInput" 
onchange="readMtlAtClient()" accept=".mtl"/>

次に、mtlFileContentは、デコードされた文字列としてテキストを持ちます！

0
jimver04