FormDataとMultierが使用する小さな穴

正しいコードを先に
HTML 5のFormDataはnode.jsミドルウェアmulter実装ピクチャアップロードで発生した問題:ページのformオブジェクトを直接FormDataに転送する構造方法でバックエンドに転送し、multerはファイルオブジェクトを取得できない.Multierアドレスサービス側コード

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);
                }
            });

問題

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

フロントエンドコードが上に書かれている場合、バックエンドmulterはファイルを取得できません.なぜなら、fileがHTML InputElementオブジェクトに含まれているため、multerはinputオブジェクトの内部を再帰的に便利にしません.
解決する

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

Inputのfiles属性でfileオブジェクトを取り出し、appendメソッドFormDataでバックエンドに転送