使用formData对象上传文件，后端代码比较只截取了主要部分
前端代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
<style type="text/css">
.container {
padding-top: 60px;
}
.padding {
padding: 5px 0 20px 0;
}
</style>
</head>
<body>
<div class="container">
<div class="form-group">
<label>请选择文件</label>
<input type="file" id="file">
<div class="padding" id="box">
<!-- 填充图片 -->
</div>
<br/>
<div class="progress">
<div class="progress-bar" style="width: 0%;" id="bar">60%</div>
</div>
</div>
</div>
<script type="text/javascript">
let file = document.getElementById('file');
file.onchange = function(){
// 创建空的formData实例
let formData = new FormData();
let bar = document.getElementById('bar');
let box = document.getElementById('box');
// 将选择的文件追加到formData表单对象中
formData.append('attrName',this.files[0]);
let xhr = new XMLHttpRequest();
xhr.open('post','http://localhost:3000/upload');
// 文件上传的过程中持续触发
xhr.upload.onprogress = function(e){
// e.loaded 文件已上传了多少
// e.total 上传文件的总大小
let result = (e.loaded / e.total) * 100 + '%';
bar.style.width = result;
bar.innerHTML = result;
}
xhr.send(formData);
xhr.onload = function(){
if(xhr.status == 200)
{
// console.log(xhr.responseText)
// 打印出来的是JSON字符串格式，需转换成JSON对象格式
const result = JSON.parse(xhr.responseText);
let img = document.createElement('img');
img.src = result.path;
// 当图片加载完毕时
img.onload = function(){
box.appendChild(img);
}
}
}
}
</script>
</body>
</html>
后端代码
// 实现文件上传的路由
app.post('/upload', (req, res) => {
// 创建formidable表单解析对象
const form = new formidable.IncomingForm();
// 设置客户端上传文件的存储路径
form.uploadDir = path.join(__dirname, 'public', 'uploads');
// 保留上传文件的后缀名字
form.keepExtensions = true;
// 解析客户端传递过来的FormData对象
form.parse(req, (err, fields, files) => {
// 将客户端传递过来的文件地址响应到客户端
res.send({
path:files.attrName.path.split('public')[1]
});
});
});
