node.js实现formdata上传 文件

1.关于formdata

方法一：

创建一个空FormData对象：
var formData = new FormData()
使用FormData.append添加一个键/值对：
formData.append('username','Chris');

方法二：利用form表单传递给formdata

<form id="myForm" name="myForm">
  <div>
    <label for="username">Enter name:</label>
    <input type="text" id="username" name="username">
  </div>
  <div>
    <label for="useracc">Enter account number:</label>
    <input type="text" id="useracc" name="useracc">
  </div>
  <div>
    <label for="userfile">Upload file:</label>
    <input type="file" id="userfile" name="userfile">
  </div>
<input type="submit" value="Submit!">
</form>

var myForm = document.getElementById('myForm');
formData = new FormData(myForm);

2.formdata上传 文件

目录结构

.
├── index.js
├── node_modules
├── package.json
└── public
    ├── index.html
    └── uploads

客户端代码

<!-- index.html -->
    <input id="file" type="file">
    <button id="btn">点击上传</button>
    <img id="img" src="" alt="">
    <script>
        var btn = document.getElementById("btn"),file = document.getElementById("file"),img = document.getElementById("img");
        btn.onclick = function () {
            // 获取文件
            var upload_file = file.files[0],formdata = new FormData(),xhr = new XMLhttprequest();
            
            formdata.append('date',new Date().toLocaleString());  
            // 将文件添加到formdata对象中，（注：下面的file字段名在Node中有用）
            formdata.append('file',upload_filE);
            xhr.open("POST","/upload",truE);
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    img.src = xhr.responseText;
                }
            }
            xhr.send(formdata);
        }
    </script>

服务端代码

// index.js
var express = require("express");
var app = express();
/*
    1. 保存在文件夹中的文件为二进制，所以想在本地点开能预览的，取消下面fs模块引用的注释
    2. 并在命令行中输入 npm install fs --save
*/
// var fs = require("fs");

var multer = require("multer");
// 这里dest对应的值是你要将上传的文件存的文件夹
var upload = multer({dest:'./public/uploads'});
app.use(express.static('./public'));
app.post("/upload",upload.single('file'),(req,res) => {
    
    // req.file 是 'file' 文件的信息 （前端传递的文件类型在req.file中获取）
    // req.body 将具有文本域数据，如果存在的话  。（上面前端代码中传递的date字段在req.body中获取）
    console.log(req.body) //{ date: '2018/1/20 下午5:25:56' }

    // ---------- 因为保存的文件为二进制，取消下面代码块注释可让保存的图片文件在本地文件夹中预览 ------
    /*
    var file_type;
    if (req.file.mimetype.split('/')[0] == 'image') file_type = '.' + req.file.mimetype.split('/')[1];
    if (file_typE) {
        fs.rename(req.file.path,req.file.path + file_type,function (err,doC) {
            if (err) {
                console.error(err);
                return;
            }
            console.log('55');
            res.send('./uploads/' + req.file.filename + file_typE)
        })
        return;
    }
    */
    // ---------------------
    
    res.send('./uploads/' + req.file.fileName)
})
app.listen(9999);

接下来解释下上述代码

index.js中依赖express、multer 可以通过npm install express multer --save进行安装，当然你也可以不使用express。
接下去重点讲述下multer：
1.安装：
npm install --save multer
2.使用：
@H_244_51@multer(opts)

.single(fieldName)

@H_265_10@multer 会添加一个 body 对象以及 file 或 files 对象到 express 的 request 对象中。body 对象包含表单的文本域信息，file 或 files 对象包含对象表单上传的文件信息。

app.post("/upload",res) => {
    // req.file 是 'file' 文件的信息 （前端传递的文件类型在req.file中获取）
    // req.body 将具有文本域数据，如果存在的话 。（上面前端代码中传递的date字段在req.body中获取）
    console.log(req.body) // { date: '2018/1/20 下午5:25:56' }
    res.send('./uploads/'+req.file.fileName)
})

注意事项:

一、formdata在控制台打印为空

node.js实现formdata上传文件

可通过下面方法获取：

var formData = new FormData();
formData.append('username','Chris');
formData.append('username','Bob');
// get()函数只会返回username附加的第一个值
formData.get('username'); // Returns "Chris"
// getAll()函数将返回username一个数组中的两个值：
formData.getAll('username'); // Returns ["Chris","Bob"]

更多formdata方法

二、如果formdata添加文件成功了的话，还是上传失败，可以看看头部是否为@H_795_12@multipart/form-data