[React] #10. express+react 파일 업로드, 삭제
express 설치 디렉토리에서 실행
npm install express-fileupload cors
react 프로젝트 생성 디렉토리에서 실행
npm install axios
express index.js 에 아래 항목 추가
const fileupload = require("express-fileupload");
const cors = require("cors");
app.use(cors());
app.use(fileupload());
app.use(express.static("files"));
app.post("/fileUpload", (req, res) => {
let saveFilepath = path.join( __dirname, "react-project", "build", "/") ;
let file = req.files.file;
let fileName = file.name;
file.mv(saveFilepath+fileName, (err) => {
if (err) {
res.status(500).send({ message: "파일 전송 실패", code: 200 });
}
res.status(200).send({ message: "파일 전송 성공", code: 200 });
});
} );
리액트 App.js 는 아래와 같이 구성한다
import { useEffect, useState } from 'react';
import axios from "axios";
function App() {
const [file, changeFile] = useState();
const [fileName, changeFileName] = useState("");
return (
<div className="App">
<input type="file" onChange={ (e)=>{
changeFile(e.target.files[0]);
changeFileName(e.target.files[0].name);
} } />
<button onClick={ ()=>{
const formData = new FormData();
formData.append("file", file);
formData.append("fileName", fileName);
try {
axios.post("http://localhost:3001/fileUpload", formData).then(
(response)=>{
console.log(response);
}
)
} catch (exception) {
console.log(exception);
}
} }>업로드!!</button>
</div>
);
}
파일 업로드만 별도로 구현한 것이므로 이전에 구현해 놓은 다른 컴포넌트는 보이지 않는다.
express 의 파일 삭제
- fs 선언
var fileSystem = require('fs');
- 파일 업로드를 위한 라우팅 작성 (unlink 사용)
app.post("/fileDelete/:image", (request, response) => {
fileSystem.unlink(`${__dirname}/react-project/public/upload/${request.params.image}`, function(err) {
if(err) {
response.json({isDeleted:"false"});
}
response.json({isDeleted:"true"});
})
});
다음 포스팅은
예정대로...
Author And Source
이 문제에 관하여([React] #10. express+react 파일 업로드, 삭제), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@exoluse/React-10.-expressreact-파일-업로드저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)