使用formidable模块上传文件的一些问题

本文介绍formidable模块：保留上传的文件的扩展名问题当前下载的版本为 "formidable": "^2.0.1"结合FormData对象的使用前端代码：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible

cdjokeZhang

2896人浏览 · 2021-12-07 13:18:51

cdjokeZhang · 2021-12-07 13:18:51 发布

本文介绍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; 这条指令并没有生效，在上传文件后并不能保留原来的扩展名。亦或是我代码写得有问题，若有发现问题，还请各位大佬不吝赐教。

第二种和第三种写法上传文件后都可正常保留原来文件的扩展名(后缀名)

如果本文对你有帮助，还请给小子点个赞哈，您的支持是我创作的动力！