html/nodejs获取上传图片并通过发起ajax请求保存到后台

关于如何隐藏原有的Input输入框问题

原生的html有点不好看，我想用一个按钮代替。方法如下：

1.在界面中写入 input type = "file" 标签，并设置 opacity 为0.

2.写一个按钮。

3.主要代码如下：

此时，即可点击按钮上传图片。

关于如何将图片传给 NodeJs 并保存图片问题 

前端主要html代码如下：

前端主要js代码如下：

原理就是获取图片然后作为 ajax 数据传送。

 $(".wsh-change-userAvatar input").on('change',function(e){
    var filearr = [];
    var files = this.files;
    for(var i = 0;i < files.length;i++){
        filearr.push(files[i]);
    }
    var formData = new FormData();                
    for(var i =0;i<filearr.length;i++){    //提交时，我们把filearr中的数据遍历一遍
        formData.append("file", filearr[i]); //用append添加到formData中，就得用户最终要提交的图片了，多张的话[]必须    
    };
    
    $.ajax({  
        type : "POST",  
        url : path+"updateUserAvatar",  //请求路径
        data : formData,  
        cache: false,
        contentType: false,
        processData: false,
        success:function(data) { 
            //get user info
            if(200 === data.code) {//这里是后台已经保存成功了，我把新的图片地址存入数据库。直接传送没办法传入userId
                $(".wsh-personal-avatar div").attr("style","background:url("+data.data+") center no-repeat");//这里是先显示存入成功的图片，实际上这一步执行的时候数据表的存储地址还没有改变。
                var url = data.data;
                var avatarData = {"object":"userAvatar","userId":personalUserId,"url":url};
                $.ajax({  
                    type : "POST",  
                    url : path+"changeUserInfo",  
                    data : JSON.stringify(avatarData),  
                    contentType : "application/json",  
                    dataType :"json" ,
                    success:function(msg) { 
                          // location.reload(); 
                     },
                    error:function(err){
                         alert("上传用户头像失败！");
                    }

                });

            } else {
                alert("上传用户头像失败！");
            }
           
        },
        error:function(err){
           alert("上传用户头像失败！");
       }

   });
 })

后台主要代码如下：

主要使用了中间件  multer

const express = require('express'),
	multer = require('multer'),
    router = express.Router();

var storage = multer.diskStorage({
    destination: function (req, file, cb){
        cb(null, '../public/userAvatar')  //这里是图片存储路劲
    },
    filename: function (req, file, cb){
        cb(null, file.originalname)
    }
});
var upload = multer({
    storage: storage
});

router.use('/', upload.single('file'), function (req, res, next) {
    var url = 'http://' + req.headers.host + '/userAvatar/' + req.file.originalname;
    res.json({
        code : 200,
        data : url
    })
});

module.exports = router;