使用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中，从而通过数据更改视图中的图片。