node 图片上传功能

node 代码：

var http = require("http");
var express = require('express')
  app = express(),    
  formidable = require('formidable'),
  fs = require('fs');
app.use(express.static(__dirname + "/public"));
//创建服务器
http.createServer(app).listen(8001, function() {
    console.log("当前您设置的端口号为" + 8001);
});
app.post('/', function(req, res) {
 var formidable = require('formidable');
    var form = new formidable.IncomingForm();   //创建上传表单
    form.encoding = 'utf-8';        //设置编辑
    form.uploadDir = 'img/';     //设置上传目录/并且保证该目录存在 否则上传不成功
    form.keepExtensions = true;     //保留后缀
    form.maxFieldsSize = 2 * 1024 * 1024;   //文件大小
    form.parse(req, function(err, fields, files) {
        console.log(fields);//前台传的其他参数
        if(err){
         console.log(err);
        }
        var item = null;
        for(var i in files){
           item = files[i];
        }
        var extName = '';  //后缀名
        switch (item.type) {
          case 'image/pjpeg':
            extName = 'jpg';
            break;
          case 'image/jpeg':
            extName = 'jpg';
            break;         
          case 'image/png':
            extName = 'png';
            break;
          case 'image/x-png':
            extName = 'png';
            break;         
        }
        if(extName.length == 0){
            console.log('只支持png和jpg格式图片');
            return;                   
        }
        var avatarName = Date.now() + '.' + extName; //设置图片名字
        var newPath = form.uploadDir + avatarName;  //设置新的图片路径
        fs.renameSync(item.path, newPath);  //重命名
        console.log(newPath);
        res.send(newPath);
    });
});

 

form表单上传：

<form action="/" method="post" enctype="multipart/form-data">
            <input type="file" name="fulAvatar" id="file1" />
            <input type="text" name="text" id="" value="1111" />
            <input type="submit" value="上传"/>
        </form>

ajax上传：

html代码:


<input type="file" name="fulAvatar" id="file1" />
        <button id='file'>上传</button>


js代码:
$('#file').click(function(){
        var data = new FormData();
            var files = $("#file1")[0].files;
            if(files){
                data.append("fulAvatar", files[0]);
            }
            data.append('name','zs');//传其他数据
　　　　　　　if(files[0].size>100000){
                alert('上传图片大小不得超过100KB');
                return false;
            }
            $.ajax({
    　　　　　　　　type: 'post',
    　　　　　　　　url:'/',
    　　　　　　　　data:data,
    　　　　　　　　contentType: false,
    　　　　　　　　processData: false,
    　　　　　　　　success : function (msg) {
                    console.log(msg);
                     }
　　　　　　    })    　　
});

 

 原生ajax上传：

html代码:


<input type="file" name="fulAvatar" id="file1" />
        <button id='btn'>上传</button>


js代码:
document.querySelector('#btn').onclick = function() {
            var fileObj = document.getElementById("file1").files[0];
            var form = new FormData();
            form.append("fulAvatar", fileObj);
　　　　　　　form.append("test","zs");//传其他数据
            var XHR=null;
            if (window.XMLHttpRequest) {
                // 非IE内核
                XHR = new XMLHttpRequest();
            } else if (window.ActiveXObject) {
                // IE内核,这里早期IE的版本写法不同,具体可以查询下
                XHR = new ActiveXObject("Microsoft.XMLHTTP");
            } else {
                XHR = null;
            }
            if(XHR){
                XHR.open("POST", "http://www.hxh999.cn/img");
                XHR.onreadystatechange = function () {
                    if (XHR.readyState == 4 && XHR.status == 200) {
                        // 这里可以对返回的内容做处理
                        // 一般会返回JSON或XML数据格式
                        console.log(XHR.responseText);
                        // 主动释放,JS本身也会回收的
                        XHR = null;
                    }
                };
                XHR.send(form);
            }
        }

 

 注意：

form.parse()不会触发的原因是：app.use(express.bodyParser())这一句处理了文件类型的post，所以导致那些第三方包对文件的处理都不起作用了。

express.bodyParser实际上包括了三部分：express.json, express.urlencoded, 和 express.multipart(就是处理了文件的部分)，所以我们实际上只需要它的前两部分就够了。

// 将：
app.use(express.bodyParser());

// 改为：
app.use(express.json());
app.use(express.urlencoded());