先上正确的代码
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中,传到后端