FormData和multer使用的一个小坑

先上正确的代码

HTML5的FormData配合node.js中间件multer实现图片上传遇到的问题：直接将页面的form对象传入FormData的构造方法中传到后端，multer无法获取文件对象。
multer地址
服务端代码

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

const storage = multer.diskStorage({
  destination: function (req, file, cb) {
    cb(null, '../likeread/uploads')
  },
  filename: function (req, file, cb) {
    cb(null, file.fieldname + '-' + Date.now())
  }
})

router.post('/fileUpload',upload.any(),(req,res)=>{
    var file=req.files[0];
    res.send(file.path);
});

客户端代码

var target=event.target;
            var NFileInput=transparentDiv.querySelector('[id="nurl"]');
            var LRFileInput=transparentDiv.querySelector('[id="lrurl"]');
            var FileInput=document.querySelector('input[id="displayFileInput"]');

            var formData;
            if(window.FormData){
                formData=new FormData();
            }else{
                alert('your browser not supported FormData');
            }

            if(NFileInput.style.display==='none'){
                formData.appned('lrFileURL',LRFileInput);
            }else{
                formData.append('nFileName',NFileInput);
                var file=FileInput.files[0];
                formData.append(file.name,file);
            }

            //URL为传入的参数
            httpRquest(self,'POST',self.URL,true,formData,'multipart/form-data');

        var xhr;

        function httpRquest(self,Method,URL,ASYN,Data){

            //创建xhr对象
            if(window.XMLHttpRequest){
                xhr=new XMLHttpRequest();
            }
            else if(window.ObjectActive){
                try{
                    xhr=new ObjectActive('Microsoft.XMLHTTP');
                }catch(e){
                    try{
                        xhr=new ObjectActive('Ms2.XHLHTTP');
                    }catch(e){
                        alert('你的浏览器不支持AJAX，请升级浏览器！');
                    }
                }

            }

            xhr.open(Method,URL,ASYN);


            xhr.send(Data);

            //接受返回的数据
            xhr.onreadystatechange=function(){
                if(xhr.readyState===XMLHttpRequest.DONE&&xhr.status===200){
                    self.imageURL=xhr.responseText;
                }
            }

        }

Object.defineProperty(this,'imageURL',{
                enumerable:true,
                configurable:true,
                get:function(){
                    return this.imageURL;
                },
                set:function(newVal){
                    this.value=newVal;
                    oldClickEvent.url=newVal;
                    document.body.removeChild(transparentDiv);//移除BombBox
                    var event=new Event('click',{"bubbles":true,"cancelable":true});//oldClick为simplemde中方法，需要event对象
                    oldClickEvent(event);
                }
            });

遇到的问题

<input type="file">
formData.append('filename',document.querySelector('input[type=file]'));
xhr.send(formData);

如果前端代码向上面这样写，后端multer不能获取文件，原因是file包含在HTMLInputElement对象中，multer不会递归的去便利input对象内部

解决

<input type="file">
formData.append('filename',document.querySelector('input[type=file]').files[0]);
xhr.send(formData);

通过input的files属性取出file对象，通过append方法FormData中，传到后端