Node.js Express+Easyui+ajax文件(图片)上传

views层:

<form id="divEdit" method="post" enctype="multipart/form-data">
    <input id="submit" type="submit" value="提交按钮">
	<span>示例图片</span>
    <input id="projectFile" name="projectFile" buttonText="选择图片"  class="easyui-filebox" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" >
</form>

 将enctype的参数修改为multipart/form-data,在使用包含文件上传控件的表单时，必须使用该值。

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。

enctype默认编码为 "application/x-www-form-urlencoded"。

easyui-filebox是easyui的文件上传控件

 accept是控制上传类型(image/gif,image/jpeg,image/jpg,image/png,image/svg),可以根据实际业务修改

点击选择图片,就可弹出以下界面

选中文件点击打开或双击文件即可选中所要上传的文件

public层:

$(function () {
    /*提交事件*/
    $("#divEdit").submit(function () {
        SaveSubmit();
        return false;
    });
});

/**
 * 保存提交
 */
function SaveSubmit() {
    if(document.getElementById("projectFile").files[0]==undefined){
        $.messager.alert('提示','请选择上传文件！','info');
        return false;
    }
   
    var form = document.getElementById("divEdit");
    // 用表单来初始化
    var formData = new FormData(form);
    
    var fileSize = formData.get('projectFile').size / 1024;
	
    if(fileSize > 10240){
        $.messager.alert('提示','上传文件不能大于10M，请重新选择！','info');
        return false;
    }
    
    //表示页面提示信息，输出的使用方式.
    $.messager.progress({text:"正在上传,请稍后..."});
    
    $.ajax({
        url:"/xxx/xxx",//routes层路径
        type:"POST",
        async: false,
        contentType : false,
        processData:false,
        cache:false,
        datatype: "json",
        data:formData,
        success:function(data){
            $.messager.progress("close");
            if (data.isSuccess) {
                $.messager.alert("系统提示", "上传成功!", 'info');
            }else {
                $.messager.alert("系统提示", "上传失败!", 'error');
            }
        },
        error: function (data, status) {
            $.messager.progress("close");
            //...
        }
    })
}

routes层:

引入所需模块

const path = require('path');
const formidable = require('formidable');
const fs = require("fs");
var uploadPath=path.join(process.cwd(),'upload\\');

 const、let是es6新增的声明变量的方式

let特点:

1.作用域是块级作用域（在ES6之前，js只存在函数作用域以及全局作用域）声明的变量只在 let 命令所在的代码块内有效

2.不存在变量声明提前

3. 不能重复定义

const特点:

一般用来声明常量，且声明的常量是不允许改变的，只读属性，因此就要在声明的同时赋值。

const与let一样，都是块级作用域，存在暂时性死区，不存在变量声明提前，不允许重复定义

具体请查看:ES6 let 与 const

如没有formidable模块,下载并引入

npm install formidable --save

接收文件方法

// 判断上传路径是否存在,如不存在创建
var pathStr = "xxx/xxx/xxx";
var tempDirArray=pathStr.split('/');
var templevelDir=uploadPath.substring(0,uploadPath.length-1);
for (var i = 0; i < tempDirArray.length; i++) {
    templevelDir = templevelDir+'/'+tempDirArray[i];
	if (fs.existsSync(templevelDir)) {
		var tempstats = fs.statSync(templevelDir);
		if (!(tempstats.isDirectory())) {
		    fs.unlinkSync(templevelDir);
		    fs.mkdirSync(templevelDir);
		}
	}else{
	    fs.mkdirSync(templevelDir);
	}
}
//创建Formidable.IncomingForm对象
var form = new formidable.IncomingForm();
//设置上传路径
form.uploadDir = path.join("upload",pathStr);
//保留后缀
form.keepExtensions = true;
//显示文件大小,默认是2M
form.maxFileSize = 1000 * 1024 * 1024;
//接收完毕
form.parse(req, function(err, fields, files) {
    if(err){
	    var errData = {};
	    errData.isSuccess=false;
	    return res.send(errData);
    }
    //文件名
    var fileName = files.projectFile.name;
    //项目下文件路径(相对路径)
    var filePath = files.projectFile.path;
    //其他业务操作......
    var resultData = {};
    resultData.isSuccess=true;
    return res.send(resultData);

})

req 请求参数
err 请求出错信息 
fields 普通请求参数 
files 上传文件请求参数

如需改变文件名称,请参考:node.js修改文件名称