Koa2 file upload and download examples

This article mainly shares with you Koa2 file upload and download examples. Upload and download are still relatively common in web applications, whether it is pictures or other files, etc. In Koa, there are many middlewares that can help us quickly implement functions.

File upload

When uploading files in the front-end, we upload them through forms, and the uploaded files cannot be treated like ordinary parameters on the server side. Also obtained through ctx.request.body. We can use the koa-body middleware to handle file uploads, which can put the request body into 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');
})

After using the middleware, you can get the uploaded file content in ctx.request.body.files. What needs to be paid attention to is setting maxFileSize, otherwise an error will be reported once the uploaded file exceeds the default limit.

After receiving the file, we need to save the file to the directory and return a url to the front end. The process in node is

1. Create a readable stream const reader = fs.createReadStream(file.path)

2. Create a writable stream const writer = fs.createWriteStream('upload/newpath.txt')

3. The readable stream is written to the writable stream through the pipe 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 = '上传成功';
})

This method is suitable for uploading images, text files, compressed files, etc.

File Download

koa-send is a static file service middleware that can be used to implement the file download function.

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

There are two methods for downloading on the front end: window.open and form submission. The simpler window.open is used here.

<button onclick="handleClick()">立即下载</button>
<script>
 const handleClick = () => {
 window.open(&#39;/download/1.png&#39;);
 }
</script>

Here window.open defaults to opening a new window, flashing and then closing, which does not give the user a good experience. You can add the second parameter window. open('/download/1.png', '_self'); , so it will be downloaded directly in the current window. However, this replaces the current page with the url, which will trigger page events such as beforeunload. If your page listens to this event and performs some operations, it will have an impact. Then you can also use a hidden iframe window to achieve the same effect.

<button onclick="handleClick()">立即下载</button>
<iframe name="myIframe" style="display:none"></iframe>
<script>
 const handleClick = () => {
 window.open(&#39;/download/1.png&#39;, &#39;myIframe&#39;);
 }
</script>

Batch download

There is no difference between batch download and single download, just perform a few more downloads. There is really no problem with this. If you pack so many files into a compressed package and then download only this compressed package, wouldn't the experience be better?

File Packaging

archiver is a module that can realize cross-platform packaging function in Node.js, supporting zip and tar formats.

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

If you package the entire folder directly, you don’t need to traverse each file and append it to the compressed package

const zipStream = fs.createWriteStream('1.zip');
const zip = archiver('zip');
zip.pipe(zipStream);
// 添加整个文件夹到压缩包
zip.directory('upload/');
zip.finalize();

Note: Pack the entire folder. The generated compressed package file cannot be stored in this folder, otherwise it will be packaged continuously.

Chinese encoding issues

When the file name contains Chinese characters, some unexpected situations may occur. So when uploading, if it contains Chinese, I will encode the file name with encodeURI() to save it, and then decrypt it with decodeURI() when downloading.

ctx.attachment(decodeURI(path));
await send(ctx, path);

ctx.attachment Set Content-Disposition to "attachment" to instruct the client to prompt for download. Use the decoded file name as the name of the downloaded file to download. In this way, when downloaded locally, the Chinese name will still be displayed.

However, in the source code of koa-send, the file path will be decoded with decodeURIComponent():

##

// koa-send
path = decode(path)

function decode (path) {
 try {
  return decodeURIComponent(path)
 } catch (err) {
  return -1
 }
}

After decoding, download the Chinese version path, and the encoded path is stored in our server, so naturally the corresponding file cannot be found.

To solve this problem, don't let it be decoded. If you don’t want to touch the koa-send source code, you can use another middleware koa-sendfile instead.

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

Related recommendations:

10 recommended articles about koa2

Tutorial on using the koa2 framework in nodejs6

Share an example tutorial on using the koa2 framework in nodejs

The above is the detailed content of Koa2 file upload and download examples. For more information, please follow other related articles on the PHP Chinese website!