박선진

프론트, 백앤드 연동

1 const express = require('express'); 1 const express = require('express');
2 const router = express.Router(); 2 const router = express.Router();
3 -const bodyParser = require('body-parser');
4 3
5 - 4 +router.post('/videoResult', function(req,res) {
6 -router.get('/data', function(req,res) { 5 + file = req.body[0].preview.split(',')[1];
6 + console.log(file.length);
7 +
7 return res.json({data:'myData'}); 8 return res.json({data:'myData'});
8 }); 9 });
9 10
10 -
11 -
12 module.exports = router; 11 module.exports = router;
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -3,9 +3,14 @@ const express = require('express'); ...@@ -3,9 +3,14 @@ const express = require('express');
3 const app = express(); 3 const app = express();
4 const api = require('./apiRouter'); 4 const api = require('./apiRouter');
5 const cors = require('cors'); 5 const cors = require('cors');
6 +const bodyParser = require('body-parser');
7 +
6 8
7 app.use(cors()); 9 app.use(cors());
10 +app.use(bodyParser.json({limit: '100mb'}));
11 +app.use(bodyParser.urlencoded({limit: '100mb', extended: true}));
12 +app.use(bodyParser());
8 app.use('/api', api); 13 app.use('/api', api);
9 14
10 -const port = 3001; 15 +const port = 3002;
11 app.listen(port, () => console.log(`노드서버 시작 : ${port}`)); 16 app.listen(port, () => console.log(`노드서버 시작 : ${port}`));
......
...@@ -16,6 +16,7 @@ class Dashboard extends React.Component { ...@@ -16,6 +16,7 @@ class Dashboard extends React.Component {
16 super(props); 16 super(props);
17 this.onChangeInputVideo = this.onChangeInputVideo.bind(this); 17 this.onChangeInputVideo = this.onChangeInputVideo.bind(this);
18 this.onClickSaveVideo = this.onClickSaveVideo.bind(this); 18 this.onClickSaveVideo = this.onClickSaveVideo.bind(this);
19 + // this.analysisVideo = this.analysisVideo.bind(this);
19 this.state = { 20 this.state = {
20 videoFiles: [], 21 videoFiles: [],
21 videoAnalysisResult:null 22 videoAnalysisResult:null
...@@ -40,16 +41,24 @@ class Dashboard extends React.Component { ...@@ -40,16 +41,24 @@ class Dashboard extends React.Component {
40 e.preventDefault(); 41 e.preventDefault();
41 console.log(this.state.videoFiles); 42 console.log(this.state.videoFiles);
42 console.log("upload video"); 43 console.log("upload video");
44 +
43 // post request 45 // post request
44 - fetch('http://localhost:3001/api/data') 46 + fetch('http://localhost:3002/api/videoResult',{
47 + method: 'POST',
48 + mode: 'cors',
49 + cache: 'no-cache',
50 + credentials: 'same-origin',
51 + headers: {
52 + 'Content-Type': 'application/json',
53 + },
54 + redirect: 'follow',
55 + referrer: 'no-referrer',
56 + body: JSON.stringify(this.state.videoFiles)
57 + })
45 .then(res=>res.json()) 58 .then(res=>res.json())
46 .then(data=>this.setState({videoAnalysisResult:data})) 59 .then(data=>this.setState({videoAnalysisResult:data}))
47 60
48 console.log(this.state.videoAnalysisResult); 61 console.log(this.state.videoAnalysisResult);
49 - this.setState({
50 - videoFiles:[],
51 - });
52 -
53 } 62 }
54 63
55 static propTypes = { 64 static propTypes = {
...@@ -58,6 +67,8 @@ class Dashboard extends React.Component { ...@@ -58,6 +67,8 @@ class Dashboard extends React.Component {
58 }; 67 };
59 68
60 render() { 69 render() {
70 + console.log("render")
71 + console.log(this.state.videoFiles)
61 return ( 72 return (
62 <div> 73 <div>
63 <h1 className="page-title">Video Analysis <small><small>Performance</small></small></h1> 74 <h1 className="page-title">Video Analysis <small><small>Performance</small></small></h1>
...@@ -107,4 +118,23 @@ function mapStateToProps(state) { ...@@ -107,4 +118,23 @@ function mapStateToProps(state) {
107 } 118 }
108 } 119 }
109 120
121 +
110 export default connect(mapStateToProps)(Dashboard); 122 export default connect(mapStateToProps)(Dashboard);
123 +
124 +function postData(url = '', data = {}) {
125 + // Default options are marked with *
126 + return fetch(url, {
127 + method: 'POST', // *GET, POST, PUT, DELETE, etc.
128 + mode: 'cors', // no-cors, cors, *same-origin
129 + cache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cached
130 + credentials: 'same-origin', // include, *same-origin, omit
131 + headers: {
132 + 'Content-Type': 'application/json',
133 + // 'Content-Type': 'application/x-www-form-urlencoded',
134 + },
135 + redirect: 'follow', // manual, *follow, error
136 + referrer: 'no-referrer', // no-referrer, *client
137 + body: JSON.stringify(data), // body data type must match "Content-Type" header
138 + })
139 + .then(response => response.json()); // parses JSON response into native JavaScript objects
140 +}
...\ No newline at end of file ...\ No newline at end of file
......