Fileオブジェクトからbase64-stringを作成するにはどのような関数を選択する必要がありますか？

Question

Fileオブジェクト（私は<input type=fileで取得したオーディオ）を持っています。

ストレージに保存するためにサーバーに送信します。

ファイルオブジェクトから取得したいbase64-stringを含むjsonを送信します。

fileReader interfaceの機能について、私はbase64でファイルを変換することを選択する必要があります混乱しています。 は、今私はreadAsBinaryStringを使用します。

function getBase64(file) { 
    return new Promise ((res,rej) => { 
    var reader = new FileReader(); 
    reader.readAsBinaryString(file); 
    reader.onload = function() { 
     res(reader.result); 
    }; 
    }) 
} 

この方法では（私の場合はmp3）前だったと音声が再生されていないように私はそれをダウンロードして、拡張子を変更した後、私は、サーバーへのオーディオ・ファイルを保存します。コーデックに関するエラーが表示されます。

多分私は私の行動の連鎖で何か重要なことを逃した、私は知らない。 ありがとうございます。

Answer 1

readAsBinaryStringは、JavaScript文字列内にエンコードされたバイナリデータを表します。クライアントとサーバーのエンコードの違いにより、データが破損する可能性があります。それはここにあるようです。

https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsBinaryStringreadAsBinaryStringは、ファイルをArrayBufferに読み込むreadAsArrayBufferを推奨しています。 ArrayBufferには、バイナリファイルのバイトの一貫性のある表現が含まれています。しかし、ArrayBufferをbase64に変換することはやや難しいかもしれません。

Base64でエンコードされたバイナリデータに興味があるので、FileReaderインスタンスでreadAsDataURLメソッドを使用することをお勧めします。ファイルの内容はBase64でエンコードされた文字列として直接読み取られます。必要な場合には、適切なデータuriを作成するために、いくつかの追加情報が付加されています。 のこちらのドキュメントをご覧ください：https://developer.mozilla.org/en-US/docs/Web/API/FileReader/readAsDataURL