koa2에서 파일 업로드 및 다운로드를 구현하는 단계에 대한 자세한 설명

php中世界最好的语言
풀어 주다: 2018-04-27 17:22:30
원래의
1445명이 탐색했습니다.

이번에는 koa2에서파일 업로드다운로드를 구현하는 단계에 대해 자세히 설명하겠습니다. 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을 프런트 엔드에 반환해야 합니다. 노드의 프로세스는
  1. 읽을 수 있는 스트림 만들기 const reader = fs.createReadStream(file.path)
  2. 쓰기 가능한 스트림 만들기 constwriter = fs.createWriteStream('upload/newpath.txt')
  3. 읽을 수 있는 스트림은 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이 사용됩니다.

 
로그인 후 복사
여기서 기본 window.open은 새 창을 열고 플래시한 다음 닫는 것인데, 이는 사용자에게 좋은 경험을 제공하지 않습니다. 두 번째 매개변수인 window.open('/download/1.png', '_self '); 현재 창에 직접 다운로드됩니다. 그러나 이는 현재 페이지를 beforeunload와 같은 페이지 이벤트를 트리거하는 URL로 대체합니다. 페이지가 이 이벤트를 수신하고 일부 작업을 수행하면 영향을 미칩니다. 그런 다음 숨겨진 iframe 창을 사용하여 동일한 효과를 얻을 수도 있습니다.

  
로그인 후 복사
일괄 다운로드

일괄 다운로드와 단일 다운로드 사이에는 차이가 없으며 몇 번만 더 다운로드하면 됩니다. 이것에는 실제로 아무런 문제가 없습니다. 너무 많은 파일을 압축 패키지로 묶은 다음 이 압축 패키지만 다운로드하면 경험이 더 좋아지지 않을까요?

파일 패키징

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();
로그인 후 복사
참고: 전체 폴더를 패키징할 때 생성된 압축 패키지 파일은 이 폴더에 저장할 수 없습니다. 그렇지 않으면 Packing이 계속됩니다.

중국어 인코딩 문제

파일명에 중국어가 포함되어 있는 경우 예상치 못한 상황이 발생할 수 있습니다. 그래서 업로드할 때 한자가 포함되어 있으면 파일명을 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); })
로그인 후 복사
이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

vue axios 요청 차단 구현 아이디어(코드 포함)

vue2 장바구니 및 주소 선택 구현 단계에 대한 자세한 설명

vue.js 트리 컨트롤 상세 설명

위 내용은 koa2에서 파일 업로드 및 다운로드를 구현하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
최신 이슈
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!