前端Vue.js 用axios提交文件显示404 cannot post？

Question

求助，我用vue写的前端，nodejs写的后端现在想把文件从前端点击click提交，传递到后端做解析。现在的问题是，我的后端设置的接收文件的文件夹可以收到前端传来的文件。但是前端发送时总会显示cannot post，检查后显示：404,这是啥原因啊？
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提交函数：

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];
          },

一级路由是parser，二级路由是upload。中间也配置了代理。别的功能，如登陆等post，get都没有问题。就是提交文件这里总是报错。关键在于别的post在浏览器检车后路径都是对的，但提交文件这块，路径总是不对。
错误如下：
Request URL: http://localhost:8024/
Request Method: POST
Status Code: 404 Not Found
Remote Address: 127.0.0.1:49214
Referrer Policy: no-referrer-when-downgrade

这里按理说应该是 http://localhost:8024/parser/upload.
不知道哪里出了问题。
以下是代理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/#devserver-watchoptions-

Answer 1

404是找不到你请求的地址，你仔细检查一下代理设置以及请求地址

---

一个完整的proxyTable应该是这样的

proxyTable: {
  '/api': {
    target: '*********',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/'
    }
  }
},

Answer 2

这个问题的虽然被楼主解决了，但是估计很多人还是蒙圈的。什么event？其实很简单。关键在于
submitFile（）函数中的formData.append('file', this.file)这句代码。
formData.append('file', this.file)中的this指的是什么？熟悉vue的都知道，vue中的this指的是当前页面的vue对象。this.file是不是已经获取到了当前要上传文件的文件信息？
element-ui框架的文件上传函数（带进度条）

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("文件上传成功");

      });

    },

Answer 3

已经解决，问题在于event这个东西，不添加是无法发送file的。不知道是不是es6的新要求。