使用formidable模块上传文件的一些问题
华飞驰
本文介绍formidable模块：保留上传的文件的扩展名问题
当前下载的版本为 "formidable": "^2.0.1"
结合FormData对象的使用
前端代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文件上传</title>
<style>
.contarner {
margin: 100px 100px;
}
.form-group input {
margin-top: 20px;
}
</style>
</head>
<body>
<div class="contarner">
<div class="form-group">
<label>请选择文件</label><br>
<input type="file" id="file">
</div>
</div>
<script>
var file = document.querySelector('#file');
file.onchange = function () {
var formData = new FormData();
formData.append('attrName', this.files[0]);
var xhr = new XMLHttpRequest();
xhr.open('post', 'http://localhost:3000/loadPlus');
xhr.send(formData);
xhr.onload = function () {
if (xhr.status == 200) {
console.log(xhr.responseText);
}
}
}
</script>
</body>
</html>服务器端代码：
// 引入express框架
const express = require('express');
//路径处理模块
const path = require('path');
//引入formidable模块
const formidable = require('formidable');
//第三种写法需要引入这个
const { IncomingForm } = require('formidable');
//创建web服务器
const app = express();
// app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
// 静态资源访问 public
app.use(express.static(path.join(__dirname, 'public')));
//创建路由
app.get('/', (req, res) => {
res.send('hello Ajax');
})
//01原来写法
app.post('/load', (req, res) => {
// 创建formidable表单解析对象
const form = new formidable.IncomingForm();
//解析客户端传过来的FormData对象
//设置上传文件的保存路径
form.uploadDir = path.join(__dirname, 'public', 'uploads');
//保留原来文件扩展名 这边测试并没有生效
form.keepExtensions = true;
form.parse(req, (err, fields, files) => {
res.send('ok');
})
})
//02第二种写法
app.post('/upload', (req, res) => {
// 创建formidable表单解析对象
const form = formidable({ multiples: true, uploadDir: path.join(__dirname, 'public', 'uploads'), keepExtensions: true })
//解析客户端传过来的FormData对象
form.parse(req, (err, fields, files) => {
res.send('ok');
})
})
//03第三种写法
app.post('/loadPlus', (req, res) => {
//解析客户端传过来的FormData对象
const form = new IncomingForm({ multiples: true, uploadDir: path.join(__dirname, 'public', 'uploads'), keepExtensions: true });
form.parse(req, (err, fields, files) => {
res.send('ok');
})
})
//监听端口
app.listen(3000);
console.log('服务器启动成功');关于这个版本的formidable，有个问题：在使用原来写法时，form.keepExtensions = true; 这条指令并没有生效，在上传文件后并不能保留原来的扩展名。亦或是我代码写得有问题，若有发现问题，还请各位大佬不吝赐教。
第二种和第三种写法上传文件后都可正常保留原来文件的扩展名(后缀名)
如果本文对你有帮助，还请给小子点个赞哈，您的支持是我创作的动力！
类似资料：