在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/HTML/ 前端Vue.js 用axios提交文件顯示404 cannot post?

前端Vue.js 用axios提交文件顯示404 cannot post?

求助,我用vue寫的前端,nodejs寫的后端現(xiàn)在想把文件從前端點(diǎn)擊click提交,傳遞到后端做解析?,F(xiàn)在的問題是,我的后端設(shè)置的接收文件的文件夾可以收到前端傳來的文件。但是前端發(fā)送時(shí)總會(huì)顯示cannot post,檢查后顯示:404,這是啥原因?。?br>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提交函數(shù):

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

一級(jí)路由是parser,二級(jí)路由是upload。中間也配置了代理。別的功能,如登陸等post,get都沒有問題。就是提交文件這里總是報(bào)錯(cuò)。關(guān)鍵在于別的post在瀏覽器檢車后路徑都是對(duì)的,但提交文件這塊,路徑總是不對(duì)。
錯(cuò)誤如下:
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

這里按理說應(yīng)該是 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-
回答
編輯回答
柒喵

404是找不到你請(qǐng)求的地址,你仔細(xì)檢查一下代理設(shè)置以及請(qǐng)求地址


一個(gè)完整的proxyTable應(yīng)該是這樣的

proxyTable: {
  '/api': {
    target: '*********',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/'
    }
  }
},
2018年4月10日 23:08
編輯回答
瘋浪

已經(jīng)解決,問題在于event這個(gè)東西,不添加是無法發(fā)送file的。不知道是不是es6的新要求。

2018年7月29日 05:01