이 글에서는 Koa2의 파일 업로드와 다운로드를 위한 샘플 코드를 주로 소개하고 있으니 참고용으로 올려보겠습니다. 함께 살펴보겠습니다
머리말
사진이든 다른 파일이든 웹 애플리케이션에서는 업로드와 다운로드가 매우 일반적입니다. Koa에는 기능을 빠르게 구현하는 데 도움이 되는 미들웨어가 많이 있습니다.
파일 업로드
프론트엔드에서 파일을 업로드할 때는 폼을 통해 업로드하지만, 업로드된 파일은 일반 매개변수처럼 ctx.request.body를 통해 서버측에서 가져올 수 없습니다. koa-body 미들웨어를 사용하여 파일 업로드를 처리할 수 있으며, 이를 통해 요청 본문을 ctx.request에 넣을 수 있습니다.
// app.js const koa = require('koa'); const app = new koa(); const koaBody = require('koa-body'); app.use(koaBody({ multipart: true, formidable: { maxFileSize: 200*1024*1024 // 设置上传文件大小最大限制,默认2M } })); app.listen(3001, ()=>{ console.log('koa is listening in 3001'); })
미들웨어를 사용한 후 ctx.request.body.files에서 업로드된 파일 내용을 가져올 수 있습니다. 주의해야 할 것은 maxFileSize를 설정하는 것입니다. 그렇지 않으면 업로드된 파일이 기본 제한을 초과하면 오류가 보고됩니다.
파일을 받은 후 파일을 디렉터리에 저장하고 URL을 프런트 엔드에 반환해야 합니다. 노드의 프로세스는
읽을 수 있는 스트림 만들기 const reader = fs.createReadStream(file.path)
쓰기 가능한 스트림 만들기 constwriter = fs.createWriteStream('upload/newpath.txt')
읽을 수 있는 스트림은 reader.pipe(writer)
const router = require('koa-router')(); const fs = require('fs'); router.post('/upload', async (ctx){ const file = ctx.request.body.files.file; // 获取上传文件 const reader = fs.createReadStream(file.path); // 创建可读流 const ext = file.name.split('.').pop(); // 获取上传文件扩展名 const upStream = fs.createWriteStream(`upload/${Math.random().toString()}.${ext}`); // 创建可写流 reader.pipe(upStream); // 可读流通过管道写入可写流 return ctx.body = '上传成功'; })
이 방법은 이미지, 텍스트 파일, 압축 파일 등을 업로드하는 데 적합합니다.
파일 다운로드
koa-send는 파일 다운로드 기능을 구현하는 데 사용할 수 있는 정적 파일 서비스 미들웨어입니다.
const router = require('koa-router')(); const send = require('koa-send'); router.post('/download/:name', async (ctx){ const name = ctx.params.name; const path = `upload/${name}`; ctx.attachment(path); await send(ctx, path); })
프론트 엔드에서 다운로드하는 방법은 window.open과 양식 제출 두 가지가 있습니다. 여기서는 더 간단한 window.open이 사용됩니다.
<button onclick="handleClick()">立即下载</button> <script> const handleClick = () => { window.open('/download/1.png'); } </script>
여기서 기본 window.open은 새 창을 열고 플래시한 다음 닫는 것인데, 이는 사용자에게 좋은 경험을 제공하지 않습니다. 두 번째 매개변수 window.open('/download/1)을 추가할 수 있습니다. .png ', '_self'); 현재 창에 직접 다운로드됩니다. 그러나 이는 현재 페이지를 beforeunload와 같은 페이지 이벤트를 트리거하는 URL로 대체합니다. 페이지가 이 이벤트를 수신하고 일부 작업을 수행하면 영향을 미칩니다. 그런 다음 숨겨진 iframe 창을 사용하여 동일한 효과를 얻을 수도 있습니다.
<button onclick="handleClick()">立即下载</button> <iframe name="myIframe" style="display:none"></iframe> <script> const handleClick = () => { window.open('/download/1.png', 'myIframe'); } </script>
일괄 다운로드
일괄 다운로드와 단일 다운로드 사이에는 차이가 없으며 몇 번만 더 다운로드하면 됩니다. 이것에는 실제로 아무런 문제가 없습니다. 너무 많은 파일을 압축 패키지로 묶은 다음 이 압축 패키지만 다운로드하면 경험이 더 좋아지지 않을까요?
파일 패키징
archiver는 Node.js에서 크로스 플랫폼 패키징 기능을 구현할 수 있는 모듈로 zip 및 tar 형식을 지원합니다.
const router = require('koa-router')(); const send = require('koa-send'); const archiver = require('archiver'); router.post('/downloadAll', async (ctx){ // 将要打包的文件列表 const list = [{name: '1.txt'},{name: '2.txt'}]; const zipName = '1.zip'; const zipStream = fs.createWriteStream(zipName); const zip = archiver('zip'); zip.pipe(zipStream); for (let i = 0; i < list.length; i++) { // 添加单个文件到压缩包 zip.append(fs.createReadStream(list[i].name), { name: list[i].name }) } await zip.finalize(); ctx.attachment(zipName); await send(ctx, zipName); })
전체 폴더를 직접 압축하는 경우 각 파일을 탐색하여 압축된 패키지에 추가할 필요가 없습니다.
const zipStream = fs.createWriteStream('1.zip'); const zip = archiver('zip'); zip.pipe(zipStream); // 添加整个文件夹到压缩包 zip.directory('upload/'); zip.finalize();
참고: 전체 폴더를 패키지할 때 생성된 압축 패키지는 파일은 이 폴더에 저장할 수 없습니다. 그렇지 않으면 지속적으로 패키지됩니다.
중국어 인코딩 문제
파일명에 중국어가 포함되어 있는 경우 예상치 못한 상황이 발생할 수 있습니다. 그래서 업로드할 때 한자가 포함되어 있으면 파일명을 encodeURI()로 인코딩해서 저장하고, 다운로드할 때 decodeURI()로 복호화하겠습니다.
ctx.attachment(decodeURI(path)); await send(ctx, path);
ctx.attachment 콘텐츠 처리를 "첨부 파일"로 설정하여 클라이언트에 다운로드 메시지를 표시하도록 지시합니다. 디코딩된 파일 이름을 다운로드할 파일 이름으로 사용합니다. 이렇게 하면 로컬로 다운로드할 때 중국어 이름이 계속 표시됩니다.
단, koa-send 소스코드에서는 파일 경로가 decodeURIComponent()로 디코딩됩니다:
// koa-send path = decode(path) function decode (path) { try { return decodeURIComponent(path) } catch (err) { return -1 } }
디코딩 후 중국어가 포함된 경로를 다운로드하시면 저희 서버에 저장되는 것이 인코딩된 내용입니다 하나의 경로에서는 당연히 해당 파일을 찾을 수 없습니다.
이 문제를 해결하려면 디코딩을 허용하지 마세요. koa-send 소스 코드를 건드리고 싶지 않다면 대신 다른 미들웨어 koa-sendfile을 사용할 수 있습니다.
const router = require('koa-router')(); const sendfile = require('koa-sendfile'); router.post('/download/:name', async (ctx){ const name = ctx.params.name; const path = `upload/${name}`; ctx.attachment(decodeURI(path)); await sendfile(ctx, path); })
관련 권장 사항:
Koa2 프레임워크의 CORS를 사용하여 도메인 간 Ajax 요청을 완료하는 방법
위 내용은 Koa2 파일 업로드 및 샘플 code_node.js 다운로드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!