Koa2 implementation of file upload and download case analysis
This time I will bring you Koa2 implementation file upload download case analysis, what are the precautions for Koa2 implementation of file upload and download, 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 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
Create a readable stream const reader = fs.createReadStream(file.path)
Create a writable stream const writer = fs.createWriteStream('upload/newpath.txt')
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.
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('/download/1.png');
}
</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 onclick="handleClick()">立即下载</button>
<iframe name="myIframe" style="display:none"></iframe>
<script>
const handleClick = () => {
window.open('/download/1.png', 'myIframe');
}
</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 < 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 do not 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: 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:
Vue2 Implementation of Shopping Cart and Address Selection Case Analysis
How vue axios implements the request interception function
The above is the detailed content of Koa2 implementation of file upload and download case analysis. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
Practical tips and case studies for data type conversion using numpy
Jan 26, 2024 am 08:21 AM
Practical skills and case analysis of numpy data type conversion Introduction: In the process of data analysis and scientific computing, it is often necessary to type conversion of data to adapt to different computing needs. As a commonly used scientific computing library in Python, numpy provides a wealth of data type conversion functions and methods. This article will introduce the practical skills of data type conversion in numpy and demonstrate its specific application through case analysis. 1. Background and significance of data type conversion When performing data analysis and scientific calculations, different types of data may require
Advanced applications and case analysis of PHP arrays
Jul 15, 2023 pm 10:22 PM
Preface to Advanced Applications and Case Analysis of PHP Arrays In PHP, arrays are a very important and commonly used data structure. It can store multiple values and quickly access and manipulate data through key-value pairs. However, in addition to basic add, delete, modify and query operations, PHP arrays also have many advanced applications and functions. This article will introduce these applications through case analysis. Multidimensionality and association of arrays In PHP, arrays can be multidimensional, that is, one array can be nested within another array to form a multi-level data structure. Such arrays are often used to store complex
Practical case analysis of Kafka tools: Quick start guide
Feb 01, 2024 am 09:16 AM
Title: Practical Guide: Practical Case Analysis for Quickly Getting Started with Kafka Tools 1. Introduction Apache Kafka is a distributed publish-subscribe messaging system that can process large amounts of data and provide high throughput, low latency, and fault tolerance. Kafka has been widely used in various fields, such as log collection, real-time analysis, data stream processing, etc. 2. Overview of Kafka tools Kafka provides a series of tools for managing and operating Kafka clusters. These tools include: Kafka command line tools: used to create
How to connect koa2 to mysql in Nodejs
Jun 01, 2023 pm 12:40 PM
Convert query results into objects or arrays. In real development, some query results should actually be put into an object JSON_OBJECT: () is in the form of key-value SELECT products.idasid, products.titleastitle, products.priceasprice, products .scoreasscore,JSON_OBJECT('id',brand.id,'name',brand.name,'rank&#
In-depth understanding of common usage and case analysis of numpy transpose function
Jan 26, 2024 am 09:21 AM
Common usage and case analysis of numpy transpose function In the fields of data processing, scientific computing and machine learning, it is often necessary to transpose arrays or matrices. The transpose operation is the operation of exchanging the rows and columns of an array, which can be achieved through the transpose function of the numpy library. This article will introduce the common usage of the numpy transpose function and further understand its application through case analysis. 1. Common usage of numpy transpose function numpy.transpose() function numpy.transp
Case studies of popular libraries and frameworks in the C++ ecosystem in real projects
Jun 03, 2024 pm 07:40 PM
In the C++ ecosystem, Qt is an ideal library for cross-platform GUI development, Boost.Asio simplifies network communication, and TensorFlow improves machine learning development efficiency. Using these libraries and frameworks can simplify software development, improve efficiency and code quality.
Application and case analysis of fixed positioning attributes in CSS
Dec 28, 2023 am 11:57 AM
The application and case analysis of fixed positioning attributes in CSS In web development, the fixed positioning attributes of CSS are a very commonly used technology. By setting the element's position to fixed, we can fix the element to a certain position on the page so that it is not affected by scrolling. This article will introduce the basic usage of fixed positioning attributes and provide some case studies to help readers better understand and apply this technology. 1. Basic usage In CSS, fixedly positioned elements are relative to the browser window. When an element is set
Discuss best practices and case studies on website performance optimization design
Feb 02, 2024 pm 05:33 PM
Best Practices and Case Analysis of Website Performance Optimization Design With the rapid development of network technology, more and more companies and individuals have their own websites. However, problems such as slower web page loading speed and longer response time followed, which had a negative impact on the user experience. Therefore, optimizing the design of website performance has become an urgent task. Website performance optimization design can be divided into two aspects: front-end optimization and back-end optimization. Front-end optimization is mainly to optimize the page layout of the website, the loading of static resources and the response to user operations.
