• 로그인
  • 장바구니에 상품이 없습니다.

home2 게시판 React 게시판 react에서 express를 통해 이미지 파일을 저장하려는데

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

4 글 보임 - 1 에서 4 까지 (총 4 중에서)
  • 글쓴이
  • #36787

    조승엽
    참가자

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

    -- 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"})
    });

    #36801

    codingapple
    키 마스터

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

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

    #36845

    조승엽
    참가자

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

    #36859

    codingapple
    키 마스터

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

4 글 보임 - 1 에서 4 까지 (총 4 중에서)
  • 답변은 로그인 후 가능합니다.

About

현재 월 700명 신규수강중입니다.

  (09:00~20:00) 빠른 상담은 카톡 플러스친구 코딩애플 (링크)
  admin@codingapple.com
  이용약관, 개인정보처리방침
ⓒ Codingapple, 강의 예제, 영상 복제 금지
top

© Codingapple, All rights reserved. 슈퍼로켓 에듀케이션 / 서울특별시 강동구 고덕로 19길 30 / 사업자등록번호 : 212-26-14752 온라인 교육학원업 / 통신판매업신고번호 : 제 2017-서울강동-0002 호 / 개인정보관리자 : 박종흠