ajax multer传递含图片的数据,使用express的multer中间件结合前端ajax实现简单的文件上传操作...

使用ajax进行表单提交的时候，有多种方式可以选择，其中react提供的思路，将数据单独存放到state中进行操作，那么文件数据也可以提交到state中进行操作，而进行ajax通信的时候，可以使用回调函数获取ajax的响应，在ajax的api中进行单独的表单构造。

这是ajax的部分

export const postArticle = function (item,img,url,getMsg) {

let fm = new FormData();

fm.append("title", item.title);

fm.append("img",img);

let xhr = new XMLHttpRequest();

xhr.open('POST', url);

xhr.onreadystatechange = function () {

if (xhr.readyState !== 4 || xhr.status !== 200) {

return;

}

getMsg(xhr.responseText);

};

xhr.send(fm);

};

这是express的部分

articleRouter.post('/postItems', upload.single('img'),(req,res) => {

fs.readFile(req.file.path,(err,data) => {

fs.writeFile("./public/pic.png",data,(err)=> {

if(err) console.log(err);

else {

res.json({

code:200,

message:"upload ok",

imgurl:"/public/pic.png"

})

}

})

})

})

这是react的部分

handleFile(e) {

this.setState({

img:e.target.files[0]

})

}

handleClick() {

postArticle(this.state,this.state.img,"http://127.0.0.1:3001/postItems",this.getMsg)

}

getMsg(msg) {

this.setState({

imgUrl:msg.imgUrl

});

alert(msg.message)

}

在input中获取到files对象之后，将数据传递给state，然后再将url和文件对象发送给ajax的api，最后通过回调函数获取图片的url地址，最后再响应到state中，从而通过数据更改视图中的图片。