node使用formidable上传文件，前台使用formdata

有时候我们不想使用form表单上传文件，而是想使用ajax，这里我们提倡用formdata的形式
但是也会遇到很多坑

首先说前台

<body>
    <input type="file" id="files">
    <button id="btn">上传</button>
  </body>

内容部分就是这些，因为是用来测试的

 $("#btn").click(function () {
        var pic=$("#files")[0].files[0];
        var formdata=new FormData();
        console.log(pic);
        formdata.append("thumbnail",pic);
        console.log(formdata);
        $.ajax({
            url:"/upload",
            type:"POST",
            data:formdata,
            processData:false,
            contentType:false,
            success:function (data) {
                console.log("返回的数据: " + data );
            }
        })
    });

这里有几个注意点
第一、如何获取type=file的值

var pic=$("#files")[0].files[0];

第二、ajax必须写上contentType:false,和processData：false

contentType为什么要设置为false，请看https://blog.csdn.net/death05/article/details/80065742

processData为什么为false
processData：
要求为Boolean类型的参数，默认为true。默认情况下，发送的数据将被转换为对象（从技术角度来讲并非字符串）以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送DOM树信息或者其他不希望转换的信息，请设置为false。

现在来说说后台

var express = require('express');
var router = express.Router();
var fs = require('fs');
var path= require("path");
var formidable = require('formidable');
/* GET home page. */
router.get('/', function(req, res, next) {
  res.render('index', { title: 'Express' });
});
router.post("/upload",function (req,res,next) {
    console.log('开始文件上传....');
    var form = new formidable.IncomingForm();
    //设置编辑
    form.encoding = 'utf-8';
    //设置文件存储路径
    form.uploadDir = "./public/images/";
    //保留后缀
    form.keepExtensions = true;
    //设置单文件大小限制
    form.maxFieldsSize = 2 * 1024 * 1024;
    form.parse(req, function(err, fields, files) {
        console.log(files);

        console.log(files.thumbnail.path);
        console.log('文件名:'+files.thumbnail.name);
        var t = (new Date()).getTime();
        //生成随机数
        var ran = parseInt(Math.random() * 8999 +10000);
        //拿到扩展名
        var extname = path.extname(files.thumbnail.name);

        //path.normalize('./path//upload/data/../file/./123.jpg'); 规范格式文件名
        var oldpath =   path.normalize(files.thumbnail.path);

        //新的路径
        let newfilename=t+ran+extname;
        var newpath =  './public/images/'+newfilename;
        console.warn('oldpath:'+oldpath+' newpath:'+newpath);
        fs.rename(oldpath,newpath,function(err){
            if(err){
                console.error("改名失败"+err);
            }
            res.render('index', { title: '文件上传成功:', imginfo: newfilename });
        });


        //res.end(util.inspect({fields: fields, files: files}));
    });
});

module.exports = router;

node使用formidable上传文件，前台使用formdata

推荐阅读更多精彩内容