ファイルの分割送信

inputタグのtype属性に“file”を指定することでアップロード用のinputタグを作成できる。

input(type="file", name="file")

inputタグからファイルオブジェクトを取得。inputタグのDOM要素を取得し、filesメソッドでファイルオブジェクトの一覧のリストを取得できる。そこから0番目の要素をとってきてあげればよい

upload_file = $("#inputfile")[0].files[0];

http://bashalog.c-brains.jp/20/12/23-190000.php を参照
ファイルオブジェクトに対して、sliceメソッドを使う。

let slice_size = 2 * 1024 * 1024; //切り取るサイズ 2M
splitFile = file.slice(0, slice_size); 

送信したいデータを格納したformDataオブジェクトを作成

var formData = new FormData();
formData.append('file', slice_file);
formData.append('email', email);
formData.append('filename', upload_file.name);

ajaxでPOSTメソッドを活用してデータを送信する

$.ajax({
  type: "POST",
  url: "./upload/",
  data: formData,
  processData: false,
  contentType: false,
})

ajaxが成功した時の処理を次のように記述することができる。.done以下のコールバック関数が実行される。

$.ajax({
  type: "POST",
  url: "./upload/",
  data: formData,
  processData: false,
  contentType: false,
})
.done(function(res){
  window.location.replace("./uploaded");
})
.fail(function(res){
  console.log("falied");
});

multerのインストール

npm install –save multer

モジュールの読み込み

var multer = require("multer");

データ送信先のパスの指定

var upload = multer({ dest: "tmp/" });

POSTされたファイルのデータを指定した保存先に保存

router.post('/upload', upload.single('file'), function (req, res, next) {
  コールバック関数
};

ファイル名は以下のbody属性のfilename属性で取得できる（ファイルを分割しているとHash値がファイル名になるので注意が必要。実際のスクリプトでは元のファイル名もAjaxで送信している）

var filename = req.file.filename;