MERN 프로젝트의 프런트 엔드를 통해 서버로 파일을 보낼 수 없습니다
<p>React 프런트엔드에서 서버로 이미지 파일을 보내려고 했지만 파일이 전송되지 않습니다. </p>
<p>내 프런트엔드 코드는 다음과 같습니다.</p>
<pre class="brush:php;toolbar:false;">useEffect(()=>{
const getImage=async ()=>{
if(파일){
const 데이터=새 FormData();
data.append("이름",파일.이름);
data.append("파일",파일);
const 응답=API.uploadFile(data)을 기다립니다;
post.picture=response.data;
}
}
getImage();
},[파일])</pre>
<p>file은 업로드된 파일을 포함하는 React 상태입니다</p>
<p>onClick 이벤트에서 setFile 함수를 사용하여 파일 상태를 업데이트했습니다. </p>
<pre class="brush:php;toolbar:false;"><label htmlFor="fileInput">
<fontSize="large" color="action"/> 추가
</라벨>
<입력
유형="파일"
id="파일입력"
스타일={{디스플레이:"없음"}}
onChange={(e)=>{
setFile(e.target.files[0])
}
}
//></pre>
<p>내 백엔드 엔드포인트는 다음과 같습니다.</p>
<pre class="brush:php;toolbar:false;">router.post("/file/upload",upload.single("file"),uploadImage);</pre>
<p>멀터 미들웨어를 사용하고 있습니다:</p>
<pre class="brush:php;toolbar:false;">"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});</pre>
<p>콜백 함수입니다</p>
<pre class="brush:php;toolbar:false;">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});
}</pre>
<p>axios 인터셉터를 통해 API 호출을 하고 있으므로 헤더 섹션도 업데이트했습니다.
이것은 내 헤더 섹션입니다: </p>
<pre class="brush:php;toolbar:false;">헤더:{
"수락": "application/json,form-data",
"콘텐츠 유형":"응용 프로그램/json",
// '콘텐츠 유형': '다중 부분/양식 데이터'
// "콘텐츠 유형": "'application/x-www-form-urlencoded'"
}</pre>
<p>파일을 업로드하려고 할 때마다 오류가 발생하고 파일을 찾을 수 없습니다</p>
<p>요청을 보냈고 파일 이름은 정상인데 파일이 전송되지 않았습니다</p>
