前言
根据公司需求,前端网页上传excel
文件,后端接收文件并解析。采用Antd
的Upload
组件实现前端功能,由于上传文件不好用mock
进行测试,临时编写一个node
程序测试后端功能。
使用Nodejs的Express框架实现文件上传后端功能
使用Express
框架,关键是使用multer
包来实现文件上传功能
"dependencies": {
"body-parser": "^1.19.0",
"cookie-parser": "^1.4.5",
"crc": "^3.8.0",
"express": "^4.17.1",
"fs": "0.0.1-security",
"moment": "^2.29.1",
"mqtt": "^4.2.6",
"multer": "^1.4.2",
"redis": "^3.1.0",
"uuid": "^8.3.2",
"winston": "^3.3.3"
}
后端配置文件server.json
:定义后端IP和端口
{
"serverHost": "127.0.0.1",
"serverPort": 8080,
}
后端执行文件server.js
:
代码如下:
const express = require('express');
const bodyParser = require('body-parser');
const config = require("./server.json");
const multer = require('multer');
const app = express();
app.use(bodyParser.urlencoded());
app.use(bodyParser.json());
// express创建server,serverPort即后端地址
app.listen(config.serverPort, function () {
console.log("访问地址为 http://%s:%s", config.serverHost, config.serverPort)
});
app.get('/', function (req, res) {
res.send('Hello Ronaldo');
});
/**
* 上传excel文件测试
*/
app.post('/api/system/protocol/upload', multer({
dest: 'upload'
}).single('file'), (req, res) => {
// 获取文件基本信息
console.log(req.file);
res.send(req.file);
})
其中文件名前后端约定为file
,dest
属性表示上传的文件在server.js
同级目录upload
文件夹中
使用Postman测试文件上传功能
注意选用表单模式,文件名为file
测试结果如下:
可以看到后端执行的结果如下:
upload
文件夹下有上传的文件:
使用Antd的Upload组件实现文件上传前端功能
后端测试完成后继续实现前端的工作
Antd
的拦截器在config.js
中设置:对应server.json
中的IP和端口
//后端代理配置
proxy: {
'/api': {
target: 'http://localhost:8080/',
changeOrigin: true,
},
},
前端代码如下:注意Upload
组件action
属性
render() {
const { mKey, fileList } = this.state;
const uProps = {
// 上传后的文件名
name: 'file',
accept: '.xls',
headers: {
authorization: 'authorization-text',
},
// 上传文件必须用拦截模式
action: '/api/system/protocol/upload',
onChange: this.handleUploadChange,
multiple: true,
fileList,
};
return (
<PageHeaderWrapper>
<div
className={styles.uploadContainer}
>
<Upload {...uProps}>
<Button type="primary" icon="upload" style={{ margin: 10 }}>
信息表上传
</Button>
</Upload>
</div>
</PageHeaderWrapper>
);
}
前端显示上传成功:
后端显示上传文件: