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

本文介绍formidable模块保留上传文件的扩展名问题（有可能上传文件成功后无法保存文件扩展名）
当前的版本为"formidable": "^2.0.1",

前端代码：

   
                <div class="form-group">
                   <label for="exampleInputFile">文章封面</label>
                   <input type="file" name="file" id="file">
                   <div class="thumbnail-waper">
                       <img class="img-thumbnail" src="" id="thumb" width="100">
                   </div>
                </div>

服务器端代码：

// 引入formidable模块
const formidable = require('formidable');
// 引入路径模块
const path = require('path');
// 第三种写法需要引入这个
const {IncomingForm} = require('formidable');

module.exports = (req, res) => {
  //1.第一种写法
  const form = new formidable.IncomingForm();
  form.multiples = true,
  // 设置上传文件的保存路径
  form.uploadDir = path.join(__dirname,'public','uploads');
  // 保留原来文件扩展名 测试没有生效
  form.keepExtensions = true;

  // 2.第二种写法
  const form = formidable({
        multiples:true,
        uploadDir: path.join(__dirname, "../", "../", 'public', 'uploads'),
        keepExtensions: true
    })
  // 3.第三种写法
  const form = IncomingForm({
        multiples:true,
        uploadDir: path.join(__dirname, "../", "../", 'public', 'uploads'),
        keepExtensions: true
    })

  
    form.parse(req,(err,fields,files)=>{})
}

第二种，第三种都可以保留文件扩展名

图片上传的预览效果：

  
        var file = document.querySelector('#file');
        file.onchange = function(){
            // 1.创建文件读取对象
            var reader = new FileReader();
            // 2.读取文件
            reader.readAsDataURL(this.files[0])
            console.log(this.files[0]);
            // 3.监听onload事件
            reader.onload = function(){
              console.log(reader.result);
              $('#thumb').attr('src',reader.result)
            }
        }