Koa2를 사용하여 파일 업로드 및 다운로드 구현

이번에는 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이 사용됩니다.

<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();

참고: 전체 폴더를 패키징할 때 생성된 압축 패키지 파일은 이 폴더에 저장할 수 없습니다. 그렇지 않으면 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 전역 및 로컬 구성 요소를 적용하는 방법

Vue에서 관찰자를 만드는 방법은 무엇입니까

위 내용은 Koa2를 사용하여 파일 업로드 및 다운로드 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!