Ant Design3.x文件上传实例

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一定要一致。

package.json:

{
  "name": "node1",
  "version": "1.0.0",
  "description": "",
  "main": "b.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "art-template": "^4.13.2",
    "body-parser": "^1.19.0",
    "cookie-parser": "^1.4.5",
    "express": "^4.17.1",
    "express-art-template": "^1.0.1",
    "multer": "^1.4.2",
    "mysql": "^2.18.1"
  }
}