バックエンドにデータを送るより良い方法

あなたがフロントエンドの開発者であるならば、あなたがバックエンドに画像アップロード、ビデオアップロードまたはオーディオアップロードに関して働いたならば、あなたは、これらのタイプのデータのアップロードが遅いプロセスであるということを知っていなければなりません、そして、大きなデータが一度にアップロードされているとき、それはさらに不愉快になります.
我々がバックエンドに絵またはオーディオをアップロードしたいとき、我々はちょうど彼らの元のフォーマットでバックエンドにそれを送ることができません.すべての画像やオーディオは、最初にフロントエンドのベース64形式に変換され、バックエンドに送信され、バックエンドからデータを取得したい場合は、フロントエンドに表示することができません.それから、それは要求を得ます.
あなたは、それが2回の転換であることを見ることができます.バイナリデータからBase 64データに、そして再びBase 64からバイナリデータまで最初に、そして、結局、このプロセスはゆっくりとアップロードする大きなデータをとります.
しかし、常に解決策があります.フロントエンドでbase 64に変換するのではなく、私たちがしなければならないことは、バックエンドに直接バイナリデータを送ることです.これはバックエンドでもプロセスを高速に変換する必要がないことを意味します.
しかし、今の質問はそれを行う方法ですか?
使えますFormData() バイナリデータを直接バックエンドに送るコンストラクタ.
最初に、formdataのインスタンスを作成しなければなりません.

var formData = new FormData();

そして、データをformdataに追加しなければなりません.

formData.append('username', 'Chris');

例を挙げましょう.

const sendAudioAsync = (audioChapter, index, audioBookId) => {
    message.warning(`Uploading audio ${index}`);

    const sendingAudio = new FormData();
    sendingAudio.append('audio', audioChapter?.audio); 
    sendingAudio.append('size', audioChapter?.audio?.size); 
    sendingAudio.append('name', audioChapter?.audio?.name); 
    sendingAudio.append('title', audioChapter?.title); 
    sendingAudio.append('time', audioChapter?.time);
    sendingAudio.append('index', index); 
}

上の例は私が働いているクライアントのリアルタイムの例です.私はオーディオとその詳細をバックエンドに送信しなければなりませんFormData 送る.
FormDataは常にキー値ペアであり、名前とデータをキー値ペアとして指定する必要があります.