FormData に関するその他の話

フォームデータ

FormData オブジェクトとは何ですか?

FormDataオブジェクトは HTML5 が提供する API で、バイナリファイルや大きなテキストデータのアップロードをサポートします。フロントエンドで画像をアップロードする場合、通常はFormDataオブジェクトを使用してフォームデータを構築し、バックエンドに送信します。

FormData が画像を渡すことができるのはなぜですか?

従来のフォームにはキーと値のペアのみを含めることができ、バイナリデータを含めることはできません。ただし、FormDataオブジェクトには画像ファイルなどのバイナリデータが含まれる場合があります。ファイルオブジェクトをオブジェクトに追加するappend()メソッドを使用すると、ファイルは自動的にバイナリデータに変換され、フォームデータに追加されますFormData

画像をアップロードする場合、通常は画像データが大きいためURLに載せることができません。GETリクエストで画像データを転送する場合、画像データをBase64エンコード形式に変換する必要があるため、データの冗長化が発生し、転送効率が低下します。したがって、通常は POST リクエストを使用して画像データを渡します。POST リクエストでは、FormDataオブジェクトのリクエスト本文に画像データを含めることができます。

FormDataの基本的な操作方法と手順

FormData オブジェクトの作成: new FormData() 次のメソッドを使用して新しい FormData オブジェクトを作成できます。

const formData = new FormData();

FormData オブジェクトへの値の追加: append() メソッドを使用して、新しいキーと値のペアを FormData オブジェクトに追加できます。このメソッドは 2 つのパラメータを受け入れます。最初のパラメータはキー名、2 番目のパラメータはキー値です。

formData.append('username', 'Tom');
formData.append('password', '123456');

BLOB オブジェクトの追加もサポートされています

formData.append('file', blob, 'example.png');

FormData オブジェクトの値を削除する: delete() このメソッドを使用して、指定したキー名とそれに対応するキー値を FormData オブジェクトから削除できます。

formData.delete('username');

FormData オブジェクトの値を取得する: get() メソッドを使用して、FormData オブジェクトから指定されたキー名のキー値を取得できます。

const username = formData.get('username');

application/json、application/x-www-form-urlencoded、form-data

application/json、application/x-www-form-urlencoded、form-data の 3 つの形式とは何ですか?

これら 3 つの形式は、クライアントとサーバーの間でデータを転送するために使用される一般的な形式です。

効果は何ですか

application/jsonこれは、クライアントとサーバー間で構造化データを転送するために使用されるデータ転送形式です。データの表現として JSON (JavaScript Object Notation) を使用し、データを送信用の文字列にシリアル化します。JSON 形式は読みやすく、解析と生成が簡単で、さまざまなプログラミング言語やプラットフォームで広くサポートされ、使用されています。

application/x-www-form-urlencoded一般的なフォームデータの送信形式です。フォームデータをキーと値の形式でエンコードし、URL エンコード形式を使用して表します。クライアントがリクエストを送信すると、フォームデータが文字列にエンコードされ、各フィールドのキーと値のペアが連結され、&記号でkey1=value1&key2=value2区切られます。この形式は主に HTML フォームの送信に使用されます

multipart/form-dataファイルやフォームデータをアップロードする際に使用される形式です。バイナリファイルとその他のフォームデータを同時に送信できるため、ファイルをアップロードする必要があるシナリオに適しています。

3 つの違いは何ですか?

データ構造:application/json JSON 形式を使用してデータを表現すると、複雑でネストされたデータ構造を送信できます。application/x-www-form-urlencoded また multipart/form-data 、キーと値のペアを使用してデータを表現すると、より単純なデータ構造を送信するのに適しています。

適用可能なシナリオ:application/json RESTful API でよく使用される構造化データの送信に適しており、application/x-www-form-urlencoded フォームの送信やより単純なデータ送信に適しており、multipart/form-data ファイルのアップロードやファイルとフォームデータの同時送信に適しています。

データエンコード方法:application/json データエンコードには JSON 形式を使用します。application/x-www-form-urlencoded データエンコードには URL エンコード形式を使用します。multipart/form-data データエンコードには区切り文字と複数の部分を使用します。

ファイルアップロードのサポート: ファイルアップロードを直接サポートしませんが、 application/json ファイルアップロードをサポートできます。application/x-www-form-urlencodedmultipart/form-data

Base64 を使用した BLOB URL

とは

BLOB:http://127.0.0.1:5500/d96d1b24-0a77-4010-b6c0-4d44ef95e485 BLOB URL

BLOB URL は、バイナリデータを参照するために使用される特別な URL 形式です。これは、ブラウザー内のバイナリデータのブロック (Blob オブジェクト) を指します。これは、画像、オーディオ、ビデオ、またはその他のファイルタイプにすることができます。BLOB URL の形式はですblob:<origin>/<unique-id>。ここで、<origin>は URL のソースを表し、<unique-id>は一意の識別子です。

Base64 は、バイナリデータをプレーンテキスト文字列に変換するために使用されるエンコードです。バイナリデータを 3 バイトのグループで処理し、各グループを 4 文字の Base64 文字列に変換します。

違いは何ですか

BLOB URL を使用すると、エンコードやデコードを行わずにバイナリデータに直接アクセスできます。

Base64 でエンコードされたデータは簡単に送信および保存できますが、使用前にエンコードとデコードが必要です

キャンバスはコンテンツを BLOB に変換し、バックグラウンドにアップロードします。

方法 1、

let canvas = $('#canvas')
canvas.toBlob(blob => {
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onload = function() {
        const file = new File([blob], 'fileName.jpg', { type: blob.type });
        // 现在，可以将生成的 file 对象作为参数传递到后台了
        uploadFile(file);
    }
});

function uploadFile(file) {
    const formData = new FormData();
    formData.append('file', file);

    $.ajax({
        url: '/upload',
        type: 'POST',
        data: formData,
        processData: false,
        contentType: false,
        success: function(response) {
            console.log(response);
        },
        error: function(xhr, status, error) {
            console.error(error);
        }
    });
}

processData: false、contentType: false、何をするのですか?

processData: false: デフォルトでは、POST リクエストを使用jQuery.ajax()または$.ajax()送信するときに、jQuery はデータをクエリ文字列形式 (key=value&key=value) に変換してサーバーに送信します。ただし、FormData、Blob、ArrayBuffer などの特殊なタイプのデータを送信する必要がある場合は、データを処理しないように jQuery に指示するようprocessDataに設定できます。falseこれにより、元のデータの形式が維持されるため、サーバーに正しく送信できます。

contentType: false: デフォルトでは、 jQuery は POST リクエストを使用jQuery.ajax()または送信するときに、$.ajax()データ型に基づいてヘッダーを自動的に設定しますContent-Type。ただし、FormData オブジェクトを送信するときは、ブラウザーが正しいヘッダー (通常は)を自動的に設定するように、contentTypeを設定する必要があります。falseContent-Typemultipart/form-data

方法 2、

                canvas.toBlob((blob) => {
                    const formData = new FormData();
                    formData.append('file', blob, 'canvas.jpg');
                    formData.append('name', 'My Canvas Image');
                    $.ajax({
                        url: '/upload',
                        type: 'POST',
                        data: formData,
                        processData: false,
                        contentType: false,
                        success: function (response) {
                            console.log(response);
                        },
                        error: function (xhr, status, error) {
                            console.error(error);
                        }
                    });
                });