Using Koa2 to implement file upload and download

This time I will bring you the file upload and download function of Koa2. What are the precautions for the file upload and download function of Koa2? The following is a practical case, let's take a look.

Preface

Uploading and downloading are relatively common in web applications, whether they are pictures or other files. 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. However, the uploaded files cannot be passed through ctx like ordinary parameters on the server side. .request.body gets. We can use the koa-body middleware to handle file uploads, which can put the request body into ctx.request.

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)

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.

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

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.

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.

If you package the entire folder directly, you do not need to traverse each file and append it to the compressed package.

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

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.

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:

How to apply vue global and local components in the project

What are the ways to make an Observer in Vue

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