[javascript] 자바스크립트로 파일 업로드 및 다운로드 중 파일 링크 생성하기
웹 개발 프로젝트에서 파일 업로드와 다운로드는 자주 사용되는 기능입니다. 이 글에서는 자바스크립트와 Node.js를 사용하여 파일을 업로드하고 다운로드할 수 있는 웹 애플리케이션을 개발하는 방법에 대해 안내하겠습니다.
파일 업로드하기
먼저, Express.js 및 Multer 라이브러리를 이용하여 Node.js 서버에 파일을 업로드하는 방법을 살펴봅니다.
const express = require('express');
const multer = require('multer');
const path = require('path');
const app = express();
const storage = multer.diskStorage({
destination: function (req, file, cb) {
cb(null, 'uploads/');
},
filename: function (req, file, cb) {
cb(null, file.fieldname + '-' + Date.now() + path.extname(file.originalname));
}
});
const upload = multer({ storage: storage });
app.post('/upload', upload.single('file'), (req, res) => {
// 파일 업로드 성공 시 작업 수행
res.send('파일이 성공적으로 업로드되었습니다.');
});
app.listen(3000, () => {
console.log('서버가 3000번 포트에서 실행 중입니다.');
});
파일 다운로드 및 링크 생성하기
다음으로, 클라이언트 측에서 웹 페이지에서 업로드한 파일을 다운로드할 수 있는 링크를 생성하는 방법에 대해 살펴봅니다.
app.get('/download/:file', (req, res) => {
const file = `${__dirname}/uploads/${req.params.file}`;
res.download(file);
});
이제, HTML과 자바스크립트를 사용하여 파일 업로드 및 다운로드를 지원하는 웹 페이지를 만들어 보겠습니다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>파일 업로드 및 다운로드 예제</title>
</head>
<body>
<h1>파일 업로드 및 다운로드</h1>
<input type="file" id="fileInput" />
<button onclick="uploadFile()">업로드</button>
<ul id="fileList"></ul>
<script>
function uploadFile() {
const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
const formData = new FormData();
formData.append('file', file);
fetch('/upload', {
method: 'POST',
body: formData
})
.then(response => response.text())
.then(result => {
// 파일 업로드 성공시 링크 표시
const fileList = document.getElementById('fileList');
const listItem = document.createElement('li');
listItem.innerHTML = `<a href="/download/${file.name}" target="_blank">${file.name}</a>`;
fileList.appendChild(listItem);
});
}
</script>
</body>
</html>
이제 파일을 브라우저에서 선택하고 “업로드” 버튼을 클릭하여 파일을 업로드할 수 있습니다. 업로드된 파일은 목록으로 표시되며, 해당 파일을 다운로드할 수 있는 링크가 생성됩니다.
파일 업로드와 다운로드를 지원하는 웹 애플리케이션을 개발하는 과정을 통해 자바스크립트와 Node.js를 사용하여 기본적인 파일 관리 기능을 구현하는 방법을 배울 수 있었습니다. 파일 업로드 및 다운로드 기능은 웹 애플리케이션의 활용성을 높이는 데 중요한 부분이며, 이를 효과적으로 구현하기 위해 다양한 라이브러리와 기술을 활용할 수 있습니다.