HTMLフォームでファイルアップロードを行う際の必須要素！multipart/form-data の境界文字列

2024-04-02

multipart/form-data の境界とは？

境界文字列 は、ランダムに生成された文字列で、データパートの区切りを示す役割を果たします。受信側は、この境界文字列を元に、各データパートを分離して処理することができます。

例：

--boundary
Content-Disposition: form-data; name="name"

John Doe
--boundary
Content-Disposition: form-data; name="file"; filename="image.png"
Content-Type: image/png

[画像データ]
--boundary--

上記の例では、2つのデータパートが存在します。

1つ目は、名前 "name" と値 "John Doe" を持つテキストデータです。
2つ目は、名前 "file" と値 "image.png" を持つ画像データです。

各データパートは、境界文字列 --boundary で区切られています。最後のデータパートの後に、境界文字列と2つのハイフン -- を追加することで、データ送信を終了します。

境界文字列の重要性

境界文字列 は、multipart/form-data 方式でデータを送信する際に必須です。境界文字列がなければ、受信側は各データパートを分離することができず、データ処理が正常に行えません。

境界文字列はランダムに生成されるため、異なるリクエストで同じ境界文字列が使用される可能性は非常に低いです。これは、データ送信のセキュリティを向上させるための一環です。

Python

import requests

# ファイルパス
file_path = "/path/to/image.png"

# リクエストヘッダ
headers = {
    "Content-Type": "multipart/form-data; boundary=my-boundary"
}

# データ
data = {
    "name": "John Doe",
    "file": (open(file_path, "rb"), "image.png")
}

# リクエスト送信
response = requests.post("https://example.com/upload", headers=headers, data=data)

# レスポンス処理
if response.status_code == 200:
    print("アップロード成功")
else:
    print("アップロード失敗")

JavaScript

const axios = require("axios");

// ファイルパス
const filePath = "/path/to/image.png";

// リクエストヘッダ
const headers = {
    "Content-Type": "multipart/form-data; boundary=my-boundary"
};

// データ
const data = {
    name: "John Doe",
    file: {
        value: fs.createReadStream(filePath),
        filename: "image.png"
    }
};

// リクエスト送信
axios.post("https://example.com/upload", headers, data)
    .then(response => {
        if (response.status === 200) {
            console.log("アップロード成功");
        } else {
            console.log("アップロード失敗");
        }
    })
    .catch(error => {
        console.log(error);
    });