这个小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);