면접관: 파일 업로드는 어떻게 하나요? 당신의 생각을 말해주세요
1. 파일 업로드란 무엇인가요?
파일 업로드는 일상적인 개발에 널리 사용됩니다.예를 들어 이미지 업로드 기능은 Weibo 및 WeChat Moments에 게시하는 등의 작업에 사용됩니다. 브라우저의 보안 제한으로 인해 브라우저는 파일 시스템을 직접 운영할 수 없으므로 브라우저가 노출하는 통합 인터페이스를 통해 파일에 접근한 후 파일 내용을 지정된 메모리로 읽어들여 전송 요청 작업을 수행해야 합니다. 파일을 메모리에 저장하고, 파일 내용을 서버에 업로드하고, 서버는 프런트 엔드에서 전송된 데이터 정보를 분석한 후 최종적으로 서버의 파일 시스템에 저장합니다.
파일을 업로드하려면 요청 헤더를 로 설정해야 합니다 content-type: multipart/form-data. 이는 multipart인터넷의 혼합 리소스, 즉 리소스가 여러 요소로 구성되어 있으며 form-dataHTML 양식 및 POST 메서드를 사용하여 파일을 업로드할 수 있음을 나타냅니다.
파일 업로드 요청 구조는 다음과 같습니다.
POST /upload HTTP/1.1
Host: example.com
Content-Type: multipart/form-data; boundary=--------------------------1234567890
--------------------------1234567890
Content-Disposition: form-data; name="file"; filename="example.jpg"
Content-Type: image/jpeg
... binary data of the image ...
--------------------------1234567890--
그 중 은 boundary다양한 양식 항목을 구분하는 데 사용되는 구분 기호를 나타냅니다. 각 양식 항목에는 Content-Disposition헤더가 포함되어야 하며 기타 헤더 정보는 Content-Type선택 사항입니다.
2. 파일을 업로드하는 방법은 무엇입니까?
파일 업로드는 두 단계로 나눌 수 있습니다.
- 파일 업로드
- 파일 파싱
1. 파일 업로드
프런트 엔드에서는 HTML 요소를 통해 <input type="file">파일 업로드 양식을 구현할 수 있습니다.
<form action="http://localhost:8080/api/upload" method="post" enctype="multipart/form-data">
<input type="file" name="file" id="file" value="" multiple="multiple" />
<input type="submit" value="提交"/>
</form>
백엔드에서는 Koa 프레임워크의 미들웨어를 사용하여 koa-body업로드된 파일 데이터를 구문 분석할 수 있습니다.
npm install koa-body
const Koa = require('koa');
const koaBody = require('koa-body');
const app = new Koa();
app.use(koaBody({
multipart: true,
formidable: {
maxFileSize: 200 * 1024 * 1024 // 设置上传文件大小最大限制，默认2M
}
}));
app.use(async (ctx) => {
// 获取上传的文件
const file = ctx.request.files.file;
// 创建可读流
const reader = fs.createReadStream(file.path);
let filePath = path.join(__dirname, 'public/upload/') + `/${
file.name}`;
// 创建可写流
const upStream = fs.createWriteStream(filePath);
// 可读流通过管道写入可写流
reader.pipe(upStream);
ctx.body = "上传成功！";
});
app.listen(8080, () => {
console.log('Server started on http://localhost:8080');
});
2. 파일 분석
서버 측에서는 업로드된 파일을 구문 분석하고 지정된 디렉터리에 저장해야 합니다. 위 코드에서는 fs모듈을 사용하여 파일 저장 작업을 처리합니다.
를 사용하는 것 외에도 미들웨어를 사용하여 파일 업로드를 구현할 koa-body수도 있습니다 .koa-multer
npm install koa-multer
const Koa = require('koa');
const Router = require('koa-router');
const multer = require('koa-multer');
const path = require('path');
const app = new Koa();
const router = new Router();
const storage = multer.diskStorage({
destination: (req, file, cb) => {
cb(null, "./upload/")
},
filename: (req, file, cb) => {
cb(null, Date.now() + path.extname(file.originalname))
}
})
const upload = multer({
storage
});
router.post("/upload", upload.single('file'), (ctx, next) => {
console.log(ctx.req.file); // 获取上传文件
})
app.use(router.routes());
app.listen(8080, () => {
console.log('Server started on http://localhost:8080');
});
위 코드에서는 multer미들웨어를 사용하여 파일 업로드를 구현했는데, storage옵션을 사용하여 파일의 저장 경로와 파일 이름을 설정하여 upload.single('file')단일 파일만 업로드함을 나타냅니다.