MERN 프로젝트의 프런트 엔드를 통해 서버로 파일을 보낼 수 없습니다

Question

React 프런트엔드에서 서버로 이미지 파일을 보내려고 했지만 파일이 전송되지 않습니다.

내 프런트엔드 코드는 다음과 같습니다.

useEffect(()=>{
        const getImage=async ()=>{
            
            if(파일){
              
              const 데이터=새 FormData();
              data.append("이름",파일.이름);
              data.append("파일",파일);
              
              
              const 응답=API.uploadFile(data)을 기다립니다;
             

              post.picture=response.data;

            }
        }
        getImage();
        
    },[파일])

file은 업로드된 파일을 포함하는 React 상태입니다

onClick 이벤트에서 setFile 함수를 사용하여 파일 상태를 업데이트했습니다.

<label htmlFor="fileInput">
    <fontSize="large" color="action"/> 추가
</라벨>
       
<입력
    유형="파일"
    id="파일입력"
    스타일={{디스플레이:"없음"}}
    onChange={(e)=>{
    setFile(e.target.files[0])
                
   }
  }
              
//>

내 백엔드 엔드포인트는 다음과 같습니다.

router.post("/file/upload",upload.single("file"),uploadImage);

멀터 미들웨어를 사용하고 있습니다:

"multer"에서 멀티 가져오기;
"multer-gridfs-storage"에서 {GridFsStorage}를 가져옵니다.
"dotenv"에서 dotenv를 가져옵니다.

dotenv.config();

const 사용자 이름=process.env.DB_USERNAME;
const 비밀번호=process.env.DB_PASSWORD;


//이미지/파일을 저장하기 위해 multer-gridfs-storage의 GridFsStorage 구성 요소를 사용합니다.

const 스토리지=새 GridFsStorage({
    //파일이 업로드될 데이터베이스의 URL
    url:`mongodb+srv://${사용자 이름}:${password}@cluster0.xki5wr4.mongodb.net/blog?
    retryWrites=true&w=다수`,
    옵션:{useNewUrlParser:true},
    파일:(요청,파일) =>
        //우리가 받아들일 파일 형식
        const match=["이미지/png","이미지/jpg,이미지/jpeg"];
        
        
        if(match.indexOf(file.memeType)===-1){
            return `${Date.now()}-blog-${file.originalname}`;
        }
         
        //파일 확장자가 일치하는 경우
        반품 {
            버킷 이름:"사진",
            파일 이름:`${Date.now()}-blog-${file.originalname}`
        }
    }
})
기본 멀티 내보내기({storage});

콜백 함수입니다

const url="http://localhost:8000";

const uploadImage=(요청,응답)=>{ 내보내기
   
    
    if(!request.file){
        return response.status(404).json({msg:"파일을 찾을 수 없음"})
    }
    
    
    const imageUrl=`${url}/file/${request.file.filename}`;
    
    return response.status(200).json({imageUrl});

}

axios 인터셉터를 통해 API 호출을 하고 있으므로 헤더 섹션도 업데이트했습니다. 이것은 내 헤더 섹션입니다:

헤더:{
        "수락": "application/json,form-data",
        "콘텐츠 유형":"응용 프로그램/json",
        // '콘텐츠 유형': '다중 부분/양식 데이터'
        // "콘텐츠 유형": "'application/x-www-form-urlencoded'"
    }

파일을 업로드하려고 할 때마다 오류가 발생하고 파일을 찾을 수 없습니다

요청을 보냈고 파일 이름은 정상인데 파일이 전송되지 않았습니다

Answer 1

코드에 몇 가지 오류가 있습니다. 이러한 버그를 수정하면 문제가 해결될 수도 있습니다.

교체:

으아악

교체:

으아악

상태 코드 변경:

으아악

헤더를 다음으로 바꾸세요:

으아악