ファイルの分割送信 [講義ノート]

ファイルの分割送信

このページの2つのバージョン間の差分を表示します。

この比較画面へのリンク

--- ファイルの分割送信 [2021/05/29 03:52] – 133.11.144.10
+++ ファイルの分割送信 [Unknown date] (現在) – 削除 - 外部編集 (Unknown date) 127.0.0.1
@@ 行 1: / 行 1: @@
-====== ファイルの分割送信 ======
-===== クライアント側の実装 =====
-==== ファイルのアップロードボタンの作成 ====
-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);
-==== ajaxを利用して非同期的にデータをサーバに送信 ====
-送信したいデータを格納した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
-以下index.js
-モジュールの読み込み
-  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;
-==== 大容量データの受け取り ====
-app

ファイルの分割送信.1622260368.txt.gz
最終更新: 2021/05/29 03:52
by 133.11.144.10