本文共 1913 字，大约阅读时间需要 6 分钟。

upload.jsx：

import React, { Component } from 'react'import { Upload, message, Button, Space} from "antd"const props = {  name: 'myFileName',  action: '/api/upload',  headers: {    authorization: 'authorization-text',  },  onChange(info) {    if (info.file.status !== 'uploading') {      console.log(info.file, info.fileList);    }    if (info.file.status === 'done') {      message.success(`${info.file.name} file uploaded successfully`);    } else if (info.file.status === 'error') {      message.error(`${info.file.name} file upload failed.`);    }  },};export default class Editor extends Component {  render() {    return (<Upload {...props}>    <Button>      <Icon type="upload" /> Click to Upload    </Button>  </Upload>    )  }}

node.js代码：

const express = require("express")const fs = require("fs")const mysql = require("mysql")const util = require("util")const { getNow } = require("./tool")const app = express();var multer = require('multer');//获得中间件var upload = multer({dest:'uploads/'});//指定配置项，这里指定文件保存于当前目录下的upload子目录app.use(upload.single('myFileName'));//运用中间件，并且指明文件名,此名需要同html input name的文件名一致，否则会报错const bodyParser = require("body-parser");const { nextTick } = require("process");app.use("/static/", express.static("./static/"));app.use('/node_modules/', express.static('./node_modules/'));app.engine("html", require("express-art-template"))app.use(bodyParser.urlencoded({ extended: false }))app.use(bodyParser.json())// 渲染页面app.get("/index", (req, res) => {    res.render("index.html");})app.post("/api/upload", (req, res) => {    res.jsonp({        ret: false,        total: 0,        rows: [],        msg: ""    });})app.get("/404", (req, res) => {    res.render("404.html");})// 配置一个全局错误处理中间件app.use(function (err, req, res, next) {    res.status(500).json({        err_code: 500,        message: err.message    })})app.listen(5555, () => {    console.log("服务启动成功......");})

注意：

前后端name一定要一致。