前端ajax上传文件，图片，后端nodejs接收文件；

前端ajax上传文件，图片，后端nodejs接收文件；

学习了nodejs，就想实现一下有进度条的文件上传，

在做这个功能的时候遇到的问题

• 用普通的ajax无法实现文件上传，只能post，get，一些json，string字符串；

• 想要上传文件或者图片，可以添加form上传；注意需要在form上添加 标示 enctype="multipart/form-data"

  • 缺点，这样会倒置页面的刷新；很糟糕有没有

• 还可以在页面中添加一个ifame,将表单提交到ifame中，不过，一听说有iframe就有点糟心有没有；

于是就有了下面的东西；
请自动忽略没有样式(只是为了实现功能)这个梗，啊哈哈；

好了废话少说直接上代码

前端部分代码

    
    
    


提交


    

用到了 FormData 类；

使用方法

• 通过new FormData 创建一个form提交实例对象；此对象会有append方法，

  • 用法 oMyform.append(name,value) name是一个字段，value是对应的值(可以是字符串，数字，file文件（通过dom.files[0]获得）)

    var oMyForm = new FormData();
    oMyForm.append("username", "Groucho");
    oMyForm.append("accountnum", 123456);
    oMyForm.append("userfile", fileInputElement.files[0]);

用到了XMLHttpRequest 的 onprogress 和 onloadend

注意 onprogress、onloadend、需要通过xhr.upload 调用如下；

oReq.upload.onprogress=function(e){
    console.log(e.loaded)
    console.log(e.total)
};
oReq.upload.onloadend=function(e){};

nodejs 后端的处理

主要用到了formidable模块

主要代码逻辑

/**
 * [导出一个中间件，formupload，用于处理文件上传；]
 */
exports.formupload = function(req,res,next){
    //console.log(req);
    var form = new formidable.IncomingForm();
    var uploadDir = path.normalize(__dirname+'/'+"../avatar");
    form.uploadDir = uploadDir;
    console.log(uploadDir);
    form.parse(req, function(err, fields, files) {
        for(item in files){
            (function(){
                var oldname = files[item].path;
                var newname = files[item].name === 'blob' ? oldname+'.xml' : oldname+"."+files[item].name.split('.')[1];
                fs.rename(oldname,newname,function(err){
                    if(err) console.log(err);
                    console.log('修改成功');
                })
            })(item);
        }
        console.log(util.inspect({fields: fields, files: files}));
        res.send('2');
    });

遇到的问题

• for 循环中有异步逻辑，导致异步逻辑出现问题；

• formidable 的上传文件路径用相对路径会找不到所指定的路径

解决办法

• 可以用闭包实现，每次传进到闭包的变量不会受到外界的影响；

• 用牛逼的__dirname 变量；指向当前文件的绝对路径；