実際、フロントエンドにはバイナリストリームの概念が含まれることがよくあります.blob、arrayBuffer、fileList、file、base64 について聞いたことはあっても、慎重に考えたことがない場合でも、ファイルのアップロードとダウンロード、画像のアップロードと表示についてよく考えてください。 .違い。これらは何で、どのように使用されますか?

1.ブロブ、ファイルリスト、ファイル

ファイルアップロードは一般的なフロントエンド機能です. 機能を実行する前に, いくつかの概念を理解する必要があります.

ブロブ

Blob に関する MDN の説明 - Blob - Web API Interface Reference | MDN

Blob is a file-like object, not the native data format of JavaScript. 名前は SQL データベースに由来し、バイナリラージオブジェクトを表します。フロントエンドのBLOB は、バッキングファイル専用のバイナリオブジェクトです (変更ではなく読み取りを使用し、データは不変です)。

ファイルリスト

MDN による FileList の説明 - FileList - Web API | MDN

FileList は、入力ボックスを使用してアップロードされたファイルを選択し、ファイルリストを返します。

ファイル

MDN のファイルの説明 - https://developer.mozilla.org/en-US/docs/Web/API/File

ファイルオブジェクトは、FileList 内のファイルオブジェクトです。

file は blob を継承し、ユーザーシステムをサポートするために拡張されたファイルです ( File オブジェクトは特殊なタイプの blob です)。

ドキュメントを選択

ネイティブアップロードファイルの使用方法を覚えていますか? アップロードされたファイルの形式は何ですか?

最初に出力を印刷して、ファイルがどのように見えるかを確認します

<body>
    <div id="test">
        <input type="file" id="file">
    </div>
    <script>
        let fileDom = document.getElementById('file');
        fileDom.addEventListener('change', function(e) {
           console.log(fileDom.files)
           console.log(fileDom.files[0].arrayBuffer())
        })
    </script>
</body>

出力を見てください

印刷物は以前の概念を検証します

入力で取得したデータは FileList ファイルオブジェクトで、各ファイルオブジェクト File はその中にあり、ファイルを見るには arrayBuffer() を使って見る

ファイルがアップロードされたら、画像のアップロードエコーによる相互変換を見てみましょう。

    <input type="file" id="file">
    <div id="imgbox"></div>
    <script>  
        document.getElementById('file').onchange = function(e) {
            document.getElementById('imgbox').innerHTML = `<img src=${URL.createObjectURL(e.target.files[0])}>`       
        }
    </script>

コンソールを開いて見てください

取得したファイルオブジェクトを画像で表示したい場合は URL.createObjectURL(blob) を使って img タグで解析できるアドレスに変換するとアドレス blob:// src の先頭が見えますblob だけでなく base64 も解析できますが、 base64 とは何ですか?

base64

Base64 - MDN Web Docs 用語集: Web 関連用語の定義 | MDN

src は base64 を解析できます。一般的なのは blob から base64、base64 から blob です。

    <input type="file" id="file">
    <div id="imgbox"></div>
    <script>  
        //blob转base64
        function blobToDataURL(blob) {
            return new Promise((reslove, reject)=> {
                var reader = new FileReader();
                reader.readAsDataURL(blob); // 读取文件
                reader.onload = function (e) {
                    reslove(e.target.result)
                }
            })
            
        }

        document.getElementById('file').onchange = function(e) {
            blobToDataURL(e.target.files[0]).then(res => {
                document.getElementById('imgbox').innerHTML = `<img src=${res}>`
            })
            
        }
    </script>

base64 へのブロブ

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

ブロブデータは file.fileList を介して取得できます.ブロブデータは大量のバイナリデータを格納できる js のオブジェクト型です.ここではブロブのプロパティとメソッドについては紹介しません. もっと知りたい場合は, mdnで確認してください

慎重な学生は、上記の変換で fileReader 関数が使用されていることに気付くかもしれません. FileReader は、コンピューターに保存されているファイルを非同期に読み取ることができます. mdn も非常に詳細であるため、ここでは紹介しません. 興味がある場合は、それを読んでください.自分で。

画像エコーに加えて、ブロブはファイルをダウンロードすることもできます

let blob = new Blob(['我是文件'])
let url = URL.createObjectURL(blob);
let a = document.createElement("a");
a.download = '文件.text';
a.href = url;
document.body.appendChild(a);
a.click();
a.remove();

上記の知識ポイントを写真でまとめてみましょう

フロントエンドで使用されるバイナリ

1.ブロブ、ファイルリスト、ファイル

ブロブ

ファイルリスト

ファイル

ドキュメントを選択

base64

おすすめ