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"
}
}