react结合nodejs实现文件上传

react代码
至于跨域的问题随便解决 res.setHeader(“Access-Control-Allow-Origin”,"*")
或者使用nginx代理解决 我是用nginx

ajax文件提交 用jQuery可以看这个
https://blog.csdn.net/qq_43505774/article/details/106179854

import axios from 'axios'
import qs from 'qs'
axios.defaults.baseURL="/user/"//这是为匹配nginx代理请求加的前置
change(e){
      const file=new FormData();
      file.append("img",e.target.files[0])//这个是nodejs接收的文件名img
      const header={
        headers:{
          "Content-Type":"multipart/form-data"
        }
      }
      axios.post("upload",file,header).then((x)=>{
      //upload我的express.post的路由匹配规则
      //axios请求会默认带上ip地址 默认前缀 自己加的url 简单
      //你要是使用jQuery 原理差不多 区别有一点 
        console.log(x.data)
      })
    }
render(){
return <input type="file" onChange={this.change.bind(this)}/>
}

nodejs代码

var express=require('express')
var app = require("express")();
var http = require("http").createServer(app);
var body=require("body-parser")
var file=require("formidable")
var fs=require("fs")
var pa=require("path")
var b=body.urlencoded({extended:false})
app.use("/uploads",express.static("/uploads"))//静态文件模块设置
//在使用nodejs里面使用require采用commonjs模块
//在es6里面的js使用impore 通过export或者export default
app.get("/",(req,res)=>{
res.sendFile(__dirname + "/index.html");
});
app.post("/user/upload",b,(req,res)=>{
    const f=new file.IncomingForm()
    f.uploadDir="./uploads"//上传目录 最好是使用express.static中间件同步
    f.parse(req, function (err, fields, files) {
        if (err) {
            console.log(err)
        } else {
            var oldPath = files.img.path; //img是formdata的append键值对
            //uploads\upload_c8e633db36ddbe45c6f13e059
            //文件上传服务器控制台显示默认文件路径 没有后缀
            var fileName=files.img.name //文件在本地的名字      
            var newPath = pa.join(__dirname,'/uploads/'+fileName);   //文件上传服务器的路径
            fs.rename(oldPath, newPath, function () {
            //使用fs.rename把服务器上传文件默认路径替换成文件上传服务器路径
            //也就是说之前是二进制的乱码而且没有后缀，我们用fs.rename给文件
            //加上路径与后缀，让这个二进制按照后缀的规则显示，
            
                if(err){
                    res.json({
                        err:"404"
                    })
                }else {
                   res.json({
                       err:"200"
                   })
                }
            })
        }
    
    })
})
app.post("/user/details",b,(req,res)=>{
    var form={
        user:req.body.user,
        pass:req.body.pass
    }
    res.json(form)
})
app.get("/user/details",(req,res)=>{
    res.json({
        user:"liu",
        pass:"0519"
    })
})


http.listen(3000,()=> { console .log('123'); });