這個小demo，是基於nodejs express框架實現文件上傳
客服端代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
</head>
<body>
用戶：<input type="text" id="user"><br>
密碼：<input type="password" id="pwd"><br>
文件：<input type="file" id="f1" multiple><br>
<input type="button" value="提交" id="btn">
</body>
<script>
window.onload = function () {
let ouser = document.getElementById('user');
let opwd = document.getElementById('pwd');
let obtn = document.getElementById('btn');
let of1 = document.getElementById('f1');
obtn.onclick = function () {
let data = new FormData();
data.set('user', ouser.value);
data.set('pwd', opwd.value);
Array.from(of1.files).forEach(file =>{
data.append('f1',file);
})
/* let arr = [];
data.forEach((value, key) => {
arr.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`);
}) */
let OAjax = new XMLHttpRequest();
OAjax.open('POST', 'http://localhost:3000/aip', true);
OAjax.send(data);
OAjax.onreadystatechange = function () {
if (OAjax.readyState == 4) {
if (OAjax.status >= 200 && OAjax.status <= 300 || OAjax == 304) {
alert('成功');
} else {
alert('失敗');
}
}
}
}
}
</script>
</html>
服務器端代碼
const express = require('express'); // 主體
const body = require('body-parser'); // 接受普通POST數據
const multer = require('multer'); // 接收文件POST數據
let server = express();
// 中間件
server.use(body.urlencoded({extended: false}));
let multerObj = multer({dest: './upload/'}); // 上傳到哪裏去
server.use(multerObj.any()); // 任何
server.post('/aip',(req,res)=>{
res.header('Access-Control-Allow-Origin','*'); // *號允許所有的域名，跨域；不安全
res.send('ok');
console.log(req.body);
console.log(req.files);
});
server.listen(3000);