preface

According to the requirements of the company, the front-end web page upload Excel files, and the back-end receives and analyzes the files. Antd’s Upload component was used to realize the front-end function. Since it was not easy to test the uploaded file with mock, a Node program was written temporarily to test the back-end function.

The Express framework of Nodejs is used to realize the function of file uploading back end

With the Express framework, the key is to use the Multer package for file upload functionality

 "dependencies": {
    "body-parser": "^ 1.19.0"."cookie-parser": "^ 1.4.5." "."crc": "^ 3.8.0." "."express": "^ 4.17.1"."fs": "0.0.1 ws-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"
  }
Copy the code

Back-end configuration file server.json: defines the back-end IP address and port

{
    "serverHost": "127.0.0.1"."serverPort": 8080,}Copy the code

The back-end execution file server.js is as follows:

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 creates the server. ServerPort is the back-end address
app.listen(config.serverPort, function () {
    console.log("The visit address is http://%s:%s", config.serverHost, config.serverPort)
});


app.get('/'.function (req, res) {
    res.send('Hello Ronaldo');
});

/** * Upload excel file to test */
app.post('/api/system/protocol/upload', multer({
    dest: 'upload'
}).single('file'), (req, res) = > {
    // Get basic file information
    console.log(req.file);
    res.send(req.file);
})
Copy the code

The convention of the front and back ends of the file name isfile.destProperty indicates that the uploaded file is inserver.jsAt the same directoryuploadfolder

Test the file upload function using Postman

Note the form mode and file namefile

The test results are as follows:

You can see the result of the back-end execution as follows:

uploadThere are uploaded files in the folder:

Use Antd’s Upload component to realize the front-end function of file uploading

Antd’s interceptor is set in config.js to correspond to the IP and port in server.json

 // Back-end proxy configuration
  proxy: {
    '/api': {
      target: 'http://localhost:8080/'.changeOrigin: true,}},Copy the code

The front-end code is as follows: Note the Upload component action property

render() {
    const { mKey, fileList } = this.state;

    const uProps = {
      // The name of the uploaded file
      name: 'file'.accept: '.xls'.headers: {
        authorization: 'authorization-text',},// Upload files must be in blocking mode
      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}} >Information table upload</Button>
          </Upload>
        </div>
      </PageHeaderWrapper>
    );
  }
Copy the code

The front-end display shows that the upload is successful:

The uploaded file is displayed on the back end: