I'm focus on upload file through Vue.js axios to the backend(node.js) right now. The tutorial is https://serversideup.net/uploading-files-vuejs-axios/
Uploading function:
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];
},
But when I try to upload one file to the backend, it keep showing "cannot post" on chrome and 404 not found. The port of my front end is 8024 and for backend is 3000. I set the agency in index.js and app.js.
index.js in config of vue:
// 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);
parser is the primary router. Also, the chrome shows that the React URL is :localhost:8024, but it should be localhost:8024/parser/upload I just cannot figure out which part of my code went wrong.
