Question

我现在专注于通过Vue.js axios上传文件到后端（node.js）。教程是https://serversideup.net/uploading-files-vuejs-axios/
上传功能：

submitFile(){
            let formData = new FormData();
            formData.append('file', this.file);
            let config = {
              headers:{'Content-Type':'multipart/form-data'}
            };

            axios.post("/parser/upload", formData, config
              ).then(function(){
                console.log('SUCCESS!!');
              })
                .catch(function(){
                  console.log('FAILURE!!');
                });
            },

        handleFileUpload(){
              this.file = this.$refs.file.files[0];
            },

但是当我尝试将一个文件上传到后端时，它会在Chrome上显示“无法发布”并且找不到404。我前端的端口是8024，后端的端口是3000.我在index.js和app.js中设置了代理。
vue配置中的index.js：

  // Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
  '/goods':{
      target:'http://localhost:3000'
  },
  '/parser/*':{
      target:'http://localhost:3000',
      changeOrigin: true,
  },
  '/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

app.js

var indexRouter = require('./routes/index');
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('/parser', parserRouter);

解析器是主路由器。此外，chrome显示React URL是：localhost：8024，但它应该是localhost：8024 / parser / upload我只是无法弄清楚我的代码哪个部分出错了。

Answer 1

你不能axios.post("/parser/upload"...，因为这会发布到前端，你需要告诉axios发布到后端

axios.post("https://localhost:3000/parser/upload"...

文件无法使用Vue.js + axios发布

1 个答案: