Detailed explanation of the steps to implement file upload in Koa2

This time I will bring you a detailed explanation of the steps for implementing Koa2 File uploading, what are the notes of the detailed steps for implementing file uploading in Koa2, the following is a practical case, let’s take a look one time.

Preface

Uploading and downloading are relatively common in web applications, whether they are pictures or other files. In Koa, there are many middleware that can help us quickly implement functions.

File upload

When uploading files in the front-end, we upload them through forms. However, the uploaded files cannot be passed through ctx like ordinary parameters on the server side. .request.body gets. We can use koa-body middleware to process fileupload, 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>立即下载</button>
<script>
 const handleClick = () => {
 window.open(&#39;/download/1.png&#39;);
 }
</script>

The default window.open here is to open a new window, flash and then close, 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>立即下载</button>
<iframe></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 nothing wrong 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 <p style="text-align: left;">If you package the entire folder directly, you do not need to traverse each file and append it to the compressed package. </p><pre class="brush:php;toolbar:false">const zipStream = fs.createWriteStream('1.zip');
const zip = archiver('zip');
zip.pipe(zipStream);
// 添加整个文件夹到压缩包
zip.directory('upload/');
zip.finalize();

Note: When packaging 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
 }
}

At this time, after decoding, download the path containing Chinese, and the path stored in our server It is an encoded path, 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);
})

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

jQuery implements the preview function when uploading images

What is the role of new() in JS

The above is the detailed content of Detailed explanation of the steps to implement file upload in Koa2. For more information, please follow other related articles on the PHP Chinese website!