react에서 express를 통해 이미지 파일을 저장하려는데

[조승엽]

이미지가 저장이 안되네요. 전송이 안되는건진 모르겠으나 다른 텍스트는 전송이 되고요.

-- react 

import { useState } from 'react';
import {useDispatch} from 'react-redux'
import axios from 'axios';

function Write() {

    let [ 이미지, 이미지변경 ] = useState('');
    let [ 제목, 제목변경 ] = useState('');
    let [ 내용, 내용변경 ] = useState('');

    let dispatch = useDispatch();

    function onSubmit(e){
        e.preventDefault();        
        let formdata = new FormData();
        formdata.append('imgFile',이미지);
       
        axios.post('http://localhost:8080/write',{
            img : formdata,
   
            title : 제목,
            content : 내용,
        },

        ).then(function(res){
            console.log(res)
        })
    }
    return(
        <div className="container">
            <h1 className="mb-4">게시물작성</h1>

            <form onSubmit={onSubmit} encType="multipart/form-data">
                <input type='file' name='imgFile' accept='image/*' onChange={(e)=>{
                    let file = e.target.files                
                    이미지변경(e.target.files[0])
                    console.log(file[0])
                    }}/>

                <p>제목</p>
                <input type='text' name='title' onChange={(e)=>{                
                    제목변경(e.target.value)
                }}/>

                <p>내용</p>
                <input type='text' name='content' onChange={(e)=>{                
                    내용변경(e.target.value)
                }}/>            
               
                <button type='submit'>글작성</button>
            </form>
           
           
        </div>
    )
}
export default Write;

 

-- server

 

const bodyParser = require('body-parser');
const express = require('express');
const app = express();
const path = require('path');
const cors = require('cors');

const multer = require('multer');

app.use(bodyParser.urlencoded({extended : true}));

app.use('/public',express.static('public'));

app.use(express.urlencoded({ extended: true }));
app.use(express.json());

app.use(cors());

let storage = multer.diskStorage({
    destination : function(req, file, cb){
        cb(null, "./public/images")
    },
    filename : function(req, file, cb){
        cb(null, file.originalname)
    },
})

let upload = multer({storage : storage});

app.listen(8080,function(요청,응답){
    console.log('listening on 8080')
});

app.post('/write',upload.single("imgFile"),function(요청,응답){
    console.log(요청.body.title)    
    console.log(요청.body.content)
    console.log(요청.body)
       
    응답.json({msg:"back"})
});

[codingapple]

리액트에서 폼태그 쓰면 전송시 새로고침되거나 그래서 이상하게 동작할 수 있습니다 

ajax요청으로 이미지를 보내봅시다 

[조승엽]

form 안쓰고 " app.post('/write',upload.single("imgFile"),function(요청,응답){   " name을 그대로 써도 되나요?

[codingapple]

네 프론트엔드에서 FormData() 이런거 잘 쓰면 폼전송이랑 똑같습니다 

[글쓴이]

글