The front-end Vue.js displays 404 cannot post? with axios submission

ask for help. I use the front end written by vue, and the back end written by nodejs now wants to submit the file from the front end by clicking click and passing it to the back end for analysis. The problem now is that the folder set by my back end to receive files can receive files from the front end. But the front end will always show cannot post, check and show: 404, what is the reason for this?
Node.js:

var express = require("express");
var router = express.Router();
var path = require("path");
var formidable = require("formidable");
var fs = require("fs");

router.get("/", function(req, res, next) {
     res.send("this is our parser");
});
router.post("/upload", function(req, res){

  var form = new formidable.IncomingForm();
  form.multiples = true;
  form.uploadDir = path.join(__dirname, "/upload");
  //
  form.on("file", function(field, file) {
    fs.rename(file.path, path.join(form.uploadDir, file.name));
  });

  form.on("error", function(err) {
    console.log("An error has occured: \n" + err);
  });

  form.on("end", function() {
    res.end("success");
  });

  form.parse(req);

});
module.exports = router;

Vue submit function:

submitFile(){
                let formData = new FormData();
                formData.append("file", this.file);

                axios.post("/parser/upload", formData,
                  {

                    headers: {
                      "Content-Type": "multipart/form-data"
                       }
                    }
                  ).then(function(){
                    console.log("SUCCESS!!");
                  })
                    .catch(function(){
                      console.log("FAILURE!!");
                    });
                },
          handleFileUpload(){
            this.file = this.$refs.file.files[0];
          },

the first-level route is parser, and the second-level route is upload. Proxies are also configured in the middle. There is no problem with other functions, such as login and post,get. Is to submit documents that are always reported wrong here. The key is that all the other post paths are correct after the browser checks the car, but the path for submitting documents is always wrong.
error is as follows:
Request URL: http://localhost:8024/
Request Method: POST
Status Code: 404 Not Found
Remote Address: 127.0.0.1 Not Found 49214
Referrer Policy: no-referrer-when-downgrade

this is supposed to be http://localhost:8024/parser/upload.
. I don"t know what went wrong.
the following is the proxy app.js

var app = express();

var indexRouter = require("./routes/index");
var usersRouter = require("./routes/users");
var parserRouter = require("./routes/parser");



// view engine setup
app.set("views", path.join(__dirname, "views"));
app.engine(".html", ejs.__express);
app.set("view engine", "html");

app.use(logger("dev"));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, "public")));


app.use("/", indexRouter);
app.use("/users", usersRouter);
app.use("/parser", parserRouter);

Vue config index.js

const path = require("path")

module.exports = {
  dev: {

    // Paths
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    proxyTable: {
      "/goods":{
          target:"http://localhost:3000"
      },
      "/parser/*":{
          target:"http://localhost:3000"
      },
      "/users/*":{
          target:"http://localhost:3000"
      }

    },

    // Various Dev Server settings
    host: "localhost", // can be overwritten by process.env.HOST
    port: 8024, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
    autoOpenBrowser: false,
    errorOverlay: true,
    notifyOnErrors: true,
    poll: false, // https://webpack.js.org/configuration/dev-server/-sharpdevserver-watchoptions-
Mar.07,2021

404 cannot find the address you requested. Please check the proxy settings and request address

carefully. < hr >

A complete proxyTable should look like this

proxyTable: {
  '/api': {
    target: '*********',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/'
    }
  }
},
Although the problem of

has been solved by the landlord, it is estimated that many people are still bewildered. What event?? It's actually very simple. The key is the code formData.append ('file', this.file) in the
submitFile () function. What does the this in
formData.append ('file', this.file) refer to? As anyone familiar with vue knows, the this in vue refers to the vue object of the current page. Has this.file got the information about the file you are currently uploading?
the file upload function of the element-ui framework (with progress bar)

handleRequest(data) {

      let formdata = new FormData();

      formdata.append("img", data.file);

      const config = {
        // 
        onUploadProgress: (progressEvent) => {

          // progressEvent.loaded:

          // progressEvent.total:

          this.progressPercent = Number(

            ((progressEvent.loaded / progressEvent.total) * 100).toFixed(2)

          );

        },

      };

      axios.post(this.uploadUrl, formdata, config).then((res) => {

        console.log(res);

        // fileName  1604578465238l.mp3

        // path  http://127.0.0.1:3030/upload/1604578465238l.mp3
            
        //voice
        this.addForm.voice = "/upload/" + res.data.data.fileName;

        this.$message.success("");

      });

    },

has been solved. The problem is that event cannot be sent without adding it. I don't know if it's a new requirement of es6.

Menu