Wiki_POST_リクエストボディのエンコード方式 - inoueshinichi/Wiki_Web GitHub Wiki

Wiki_POST_リクエストボディのエンコード方式

参考

主な3つのリクエストボディのエンコード方式

  • application/x-www-form-urlencoded
  • multipart/form-data
  • application/json

要約

  • HTTPのPOST時のBodyのエンコード方式は複数ある
  • 近年は,テキストベースのapplication/jsonを用いる.
  • HTMLとブラウザのみの組み合わせでではapplication/jsonを使用することはできない.
  • application/jsonは, 文字列なのでバイナリデータはBase64でエンコード/デコードして使用する.
  • application/x-www-form-urlencodedは, <form>のenctype属性を指定しない場合のデフォルト.
  • application/x-www-form-urlencodedは, URLで使用できる文字列に変換する.
  • application/x-www-form-urlencodedのエンコード方式は複雑. (URLで使用できない文字列->UTF-8エンコード->バイナリ毎に%XXとする)
  • multipart/form-dataは, フォームの各項目毎に補助情報を付与することで, バイナリデータとテキストデータを混在して送信できる.
  • multipart/form-dataは, <form enctype='multipart/form-data'>で使用可能になる.

Node.jsのExpressでの対応

  • $ npm install multer for multipart/form-data
const express = require('express');
const app = express();

app.use(express.json()); // application/json形式に対応する
app.use(express.urlencoded({ extended: true })); // application/x-www-form-urlencoded形式に対応する

// multipart/form-data形式に対応する
const multer = require('multer'); // `multipart/form-data` of HTTP <form>
const mediaImageDir = path.join(__dirname, "public", "media", "image"); // form内のMediaに該当する項目を保存するディレクトリを指定

//Set Storage Engine
const storage = multer.diskStorage({
    destination: mediaImageDir,
    filename: function (req, file, cb) {
        cb(null, file.fieldname + '-' + Date.now() +
            path.extname(file.originalname));
    }
});
const uploader = multer({ storage: storage });

// HTML form with "multipart/form-data"
// <form method="POST" action="/foo" enctype="multipart/form-data">
//   <input type="text" name="title" placeholder="picture-title" />
//   <input type="file" name="imageFile" />
//   <input type="submit" value="Submit" />
// </form>

// 対応するAPI
app.post("your/path/to/upload/media", uploader.single('imageFile'), async (req, res) => {
  // 取得した画像を扱う
  console.log('--- post() /foo called ---')
  console.log('--- req.body --')
  console.log(req.body)
  console.log('オリジナルファイル名: ', req.file.originalname);
  console.log('送信された画像ファイルのパス: ', req.file.path);

  // MIMEタイプでファイル形式をチェック
  let ext = '';
  if (req.file.mimetype === 'image/png') {
    ext = ".png";
  } else if (req.file.file.minetype === 'image/jpeg') {
    ext = ".jpeg";
  } else {
    res.send("PNGまたはJPEG画像以外はUploadしません.");
    return;
  }
  res.send('Done')
});

// HTML form with "multipart/form-data"
// <form method="POST" action="/foo" enctype="multipart/form-data">
//   <input type="text" name="country" placeholder="country" />
//   <input type="text" name="city" placeholder="city" />
//   <input type="file" name="files" />
//   <input type="file" name="files" />
//   <input type="file" name="files" />
//   <input type="submit" value="Submit" />
// </form>

// 対応するAPI
app.post("your/path/to/upload/media", uploader.array('files', 3), (req, res) => {
  // 取得した画像を扱う
  console.log('--- post() /foo called ---')
  console.log('--- req.body --')
  console.log(req.body)
  console.log('--- req.files ---')
  console.log(req.files)
res.send('Done')
});
⚠️ **GitHub.com Fallback** ⚠️