使用Antd和Express实现文件的上传功能

1,118

前言

根据公司需求,前端网页上传excel文件,后端接收文件并解析。采用AntdUpload组件实现前端功能,由于上传文件不好用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);
})

其中文件名前后端约定为filedest属性表示上传的文件在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>
    );
  }

前端显示上传成功: 在这里插入图片描述

后端显示上传文件: 在这里插入图片描述