FormData和multer使用的一个小坑

来源：互联网发布：java 时间戳时区编辑：程序博客网时间：2024/06/08 14:21

先上正确的代码

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中，传到后端

阅读全文

0 0