TestWebPost
因為公司有需要來測試一下，有關上傳檔案的測試，所以來測試一下，會來架設一台server和使用C#來上傳檔案。
在安裝Express之前來建立一各資料夾
mkdir myweb
cd myweb
再來建立一個 package.js 檔案
npm init
阿就一直按 Enter 就好了！ 安裝 Express
npm install express --save
在 myapp 目錄中，建立 index.js 檔案
我是vscode來執行此程式
因為要處理有關網頁的東西所以來安裝一些額的套件。
npm install multer
這個套件處理有關 multipart/form-data
npm install body-parser
//基本宣告使用
var express = require('express');
var app = express();
var multer = require('multer');
var bodyParser = require('body-parser');
var app = Express();
app.use(bodyParser.json());
//檔案的儲存位置
var Storage = multer.diskStorage({
destination: function (req, file, callback) {
callback(null, "./Images");
},
filename: function (req, file, callback) {
callback(null, file.fieldname + "_" + Date.now() + "_" + file.originalname);
}
});
var upload = multer({ storage: Storage }).array("imgUploader", 3); //Field name and max count
//網頁相關
app.get("/", function (req, res) {
res.sendFile(__dirname + "/index.html");
});
//上傳api
app.post("/api/Upload", function (req, res) {
upload(req, res, function (err) {
if (err) {
return res.end("Something went wrong!");
}
return res.end("File uploaded sucessfully!.");
});
});
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
});在下面建立indexl.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Upload images to server using Node JS</title>
<script src="Scripts/jquery-3.1.1.min.js"></script>
<script src="Scripts/jquery.form.min.js"></script>
<script>
$(document).ready(function () {
var options = {
beforeSubmit: showRequest, // pre-submit callback
success: showResponse // post-submit callback
};
// bind to the form's submit event
$('#frmUploader').submit(function () {
$(this).ajaxSubmit(options);
// always return false to prevent standard browser submit and page navigation
return false;
});
});
// pre-submit callback
function showRequest(formData, jqForm, options) {
alert('Uploading is starting.');
return true;
}
// post-submit callback
function showResponse(responseText, statusText, xhr, $form) {
alert('status: ' + statusText + '\n\nresponseText: \n' + responseText );
}
</script>
</head>
<body>
<form id="frmUploader" enctype="multipart/form-data" action="api/Upload/" method="post">
<input type="file" name="imgUploader" multiple />
<input type="submit" name="submit" id="btnSubmit" value="Upload" />
</form>
</body>
</html>在下面要建立資料夾Scripts可以來放jquery
Wireshark相關
要選擇Npcap Loopback Adapter，在過濾器上輸入tcp.port == 3000
查看封包的head，是先選擇有Post如POST /FMS_WS/Services/API/FileUpload/ HTTP/1.1 (image/jpeg)在下面有Hypertext Transfer Protocol下面可以看到