<프론트>
import 'bootstrap/dist/css/bootstrap.min.css'; //bootstrap
import {Nav, Navbar, Container,Button,Form} from 'react-bootstrap';
import {useNavigate} from 'react-router-dom';
import {useState} from 'react'
import axios from 'axios';
function MakeLecture(){
let navigate = useNavigate();
let [info,setInfo] = useState({
id: 0,
title:'',
teacher:'',
detail:'',
upload:''
})
const handleChange = (e)=>{
setInfo({...info,[e.target.name]:e.target.value})
}
return (
<>
<div className='signupContainer'>
<h1>강의생성</h1>
<Form className='loginBox'>
<Form.Group className="mb-3" controlId="formBasicEmail">
<Form.Label style={{fontSize:'20px', fontWeight:'bold'}}>강의명</Form.Label>
<Form.Control type="text" placeholder="강의명 입력" name='title' value={info.title} onChange={handleChange}/>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Label style={{fontSize:'20px', fontWeight:'bold'}}>선생님</Form.Label>
<Form.Control type="text" placeholder="선생님" name='teacher' value={info.teacher} onChange={handleChange} />
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Label style={{fontSize:'20px', fontWeight:'bold'}}>강의설명</Form.Label>
<Form.Control type="text" placeholder="강의설명" name='detail' value={info.detail} onChange={handleChange}/>
</Form.Group>
<Form.Group className="mb-3" controlId="formBasicPassword">
<Form.Label style={{fontSize:'20px', fontWeight:'bold'}}>업로드</Form.Label>
<Form.Control type="file" placeholder="upload" name='upload' accept='video/*' value={info.upload} onChange={handleChange}/>
</Form.Group>
<Button variant="outline-success" onClick={()=>{
axios.post('http://localhost:3000/makeLecture',info).then((result)=>{
console.log('성공이에요')
alert("생성완료!")
navigate('/lectureRoom')
})
.catch(()=>{
console.log('실패함')
})
}}>생성하기</Button>
</Form>
</div>
</>
)
}
export default MakeLecture
<서버>
app.post('/makeLecture',upload.single('upload'),function(req,res){
const r = req.body
db.collection('lecture_counter').findOne({name:'강의수'}, function(error,result){
var totalLecture = result.totalLecture
db.collection('lecture').insertOne({_id: totalLecture+1, title: r.title, teacher: r.teacher,
detail: r.detail, maker:parseInt(totalLecture-1)},function(error,result){
db.collection('lecture_counter').updateOne({name:'강의수'},{$inc:{totalLecture:1}},function(error,result){
if(error) return console.log(error)
res.send('전송완료')
})
})
})
}) // 강의생성
이런 상태입니다.
다만 state에 저장한값을 axios로 보내서 db에 저장하는 식인데
동영상 파일만은 노드js 서버에 저장하려합니다.
다만 upload.single('upload')가 동작하지 않고 어떻게 수정하는게 좋을지 여쭤보고 싶습니다.
구조는 이러합니다.
p.s) 코드는 동일한데 갑자기 DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.
at HTMLInputElement.set [as value] 이런 에러가 나옵니다. 찾아보니 value를 지우라는데 지웠더니 서버로 넘어가는 state에 upload가 빈값으로 넘어갑니다