node实战——koa实现文件下载和图片/pdf/视频预览(node后端储备知识)


yma16-logo

⭐前言

大家好,我是yma16,本文分享关于node实战——koa实现文件下载和图片预览。
本文适用对象:前端初学者转node方向,在校大学生,即将毕业的同学,计算机爱好者。
node系列往期文章
node_windows环境变量配置
node_npm发布包
linux_配置node
node_nvm安装配置
node笔记_http服务搭建(渲染html、json)
node笔记_读文件
node笔记_写文件
node笔记_连接mysql实现crud
node笔记_formidable实现前后端联调的文件上传
node笔记_koa框架介绍
node_koa路由
node_生成目录
node_读写excel
node笔记_读取目录的文件
node笔记——调用免费qq的smtp发送html格式邮箱
node实战——搭建带swagger接口文档的后端koa项目(node后端就业储备知识)
node实战——后端koa结合jwt连接mysql实现权限登录(node后端就业储备知识)
node实战——koa给邮件发送验证码并缓存到redis服务(node后端储备知识)
http下载
HTTP下载是通过HTTP协议从Internet上下载(或上传)文件的过程。它是一种通过网页浏览器下载文件的常见方式。

通常,HTTP下载发生在以下情形下:

  1. 用户在网页浏览器中单击下载链接时,浏览器自动使用HTTP协议向服务器请求文件并将其下载到本地计算机。

  2. 用户使用特殊的下载管理器程序(如IDM,迅雷等)来下载文件,这些下载管理器也使用HTTP协议从服务器下载文件。

无论使用哪种方式,HTTP下载的基本过程都是相同的:客户端向服务器请求文件并接收响应,然后将文件下载到本地计算机。

⭐koa-send库实现下载

koa-send is a middleware for the Koa web framework that simplifies
sending static files as responses to HTTP requests. It allows you to
serve files from a directory and optionally apply cache-control
headers, send files as attachments, and handle range requests (partial
content). It is commonly used to serve CSS, JavaScript, images, and
other types of static assets.

koa-send 是 Koa Web 框架的中间件,它简化了发送静态文件作为对 HTTP 请求的响应的过程。它允许您从目录中提供文件,并选择性地应用缓存控制标头、将文件作为附件发送以及处理范围请求(部分内容)。它通常用于提供 CSS、JavaScript、图像和其他类型的静态资产。

安装


$ npm install koa-send

封装一个下载exe的功能

const Router = require('koa-router');
const router = new Router();
const send = require('koa-send');

// down exe
router.get('/down/exe', async (ctx) => {
    try{
        const file_path='./db/exe/tools/cat-tools-setup.exe'
        ctx.attachment(file_path);
        await send(ctx, file_path);
    }
    catch(e){
        ctx.body = { code: 0, data:e,msg: 'get label fail'};
    }
});

module.exports=router

下载 ./db/exe/tools/cat-tools-setup.exe对应的文件
实现效果 https://yongma16.xyz/cat-web/#/
download

⭐mime-types库实现图片预览

MIME types (Multipurpose Internet Mail Extensions types) are a way to
classify files on the Internet according to their nature and format.
They are used by web servers and browsers to recognize the file type
of a document being requested or transmitted. Examples of MIME types
include:

  • text/plain: plain text file
  • text/html: HTML (Hypertext Markup Language) file
  • image/jpeg: JPEG image file
  • image/png: PNG image file
  • application/pdf: PDF (Portable Document Format) file
  • application/vnd.ms-excel: Microsoft Excel file
  • application/vnd.openxmlformats-officedocument.spreadsheetml.sheet: Microsoft Excel OpenXML file
  • application/vnd.ms-powerpoint: Microsoft PowerPoint file
  • application/vnd.openxmlformats-officedocument.presentationml.presentation:
    Microsoft PowerPoint OpenXML file
  • audio/mpeg: MP3 audio file
  • video/mp4: MPEG-4 video file. There are many other MIME types for different types of files, and new ones are added as new file formats
    emerge.

MIME 类型(多用途 Internet 邮件扩展类型)是一种根据其性质和格式对 Internet 上的文件进行分类的方法。Web 服务器和浏览器使用它们来识别所请求或传输的文档的文件类型。MIME 类型的示例包括:

  • text/plain:纯文本文件
  • text/html:HTML(超文本标记语言)文件
  • image/jpeg:JPEG图像文件
  • image/png:PNG 图像文件
  • application/pdf: PDF(便携式文件格式)文件
  • application/vnd.ms-excel:Microsoft Excel 文件
  • application/vnd.openxmlformats-officedocument.spreadsheetml.sheet:Microsoft Excel OpenXML 文件
  • application/vnd.ms-powerpoint:Microsoft PowerPoint 文件
  • application/vnd.openxmlformats-officedocument.presentationml.presentation:Microsoft
  • PowerPoint OpenXML 文件
  • audio/mpeg:MP3 音频文件
  • video/mp4:MPEG-4 视频文件。
    对于不同类型的文件,还有许多其他 MIME 类型,并且随着新文件格式的出现,会添加新的 MIME 类型。
    安装mime-types
$ npm install mime-types

封装渲染的api

const Router = require('koa-router');
const router = new Router();
const mime = require('mime-types');
const fs=require('fs')
// down exe
router.get('/media/view', async (ctx) => {
    try{
        const {path}=ctx.query
        const filePath='./media/static/'+path
        let file = null;
        try {
            file = fs.readFileSync(filePath); //读取文件
        } catch (error) {
            //如果服务器不存在请求的图片,返回默认图片
            file = fs.readFileSync('./media/static/404.png'); //读取文件
        }

        let mimeType = mime.lookup(filePath); //读取图片文件类型
        ctx.set('content-type', mimeType); //设置返回类型
        ctx.body = file; //返回图片
    }
    catch(e){
        ctx.body = { code: 0, data:e,msg: 'view media fail'};
    }
});

module.exports=router

渲染成功!

💖 渲染图片

render-img

💖渲染404

404-render

💖预览pdf

pdf-render

💖预览视频

MP4-render

⭐总结

Koa 是一个 Node.js Web 框架,它提供了一组 API,用于构建 Web 应用程序和 API。在使用 Koa 进行 Web 开发时,通常需要下载和安装 Koa,然后编写代码来定义路由、处理请求和响应、以及渲染视图等。

以下是使用 Koa 进行 Web 开发时需要掌握的主要内容:

  1. 下载和安装 Koa:可以使用 npm 命令来下载和安装 Koa,如:npm install koa。

  2. 定义路由:可以使用 Koa-router 模块来定义路由,将请求映射到处理程序上。

  3. 处理请求和响应:可以使用 Koa 中间件来处理请求和响应,例如:koa-bodyparser 中间件用于解析请求体,koa-static 中间件用于提供静态文件服务等。

  4. 渲染视图:可以使用第三方模板引擎来渲染视图,例如:koa-views 中间件用于集成模板引擎,例如 ejs、pug、handlebars 等。

使用 Koa 进行 Web 开发,需要具备一定的 Node.js 基础、HTTP 知识、异步编程和中间件等方面的技能。同时,需要熟练掌握 Koa 的 API 和相关的第三方模块,以便快速开发高效的 Web 应用程序和 API。

下载使用 koa-send
预览使用 mime-types

⭐结束

本文分享到这结束,如有错误或者不足之处欢迎指出!
blue-sky

👍 点赞,是我创作的动力!
⭐️ 收藏,是我努力的方向!
✏️ 评论,是我进步的财富!
💖 最后,感谢你的阅读!

  • 18
    点赞
  • 23
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 17
    评论
首先,需要安装koakoa-body这两个依赖包: ``` npm install koa koa-body --save ``` 然后,可以通过以下代码实现上传文件生成url: ```javascript const Koa = require('koa'); const koaBody = require('koa-body'); const { createWriteStream } = require('fs'); const { createObjectURL } = require('url'); const app = new Koa(); // 设置上传文件的存储路径 const uploadPath = './public/uploads/'; // 设置上传文件的最大大小为10MB app.use(koaBody({ multipart: true, formidable: { maxFileSize: 10 * 1024 * 1024 } })); // 处理文件上传请求 app.use(async (ctx) => { // 上传的文件对象 const file = ctx.request.files.file; // 文件保存的路径 const filePath = uploadPath + file.name; // 创建可写流 const stream = createWriteStream(filePath); // 写入文件 await new Promise((resolve, reject) => { stream.on('finish', resolve); stream.on('error', reject); file.pipe(stream); }); // 生成文件的url const fileUrl = createObjectURL(file); // 返回文件的url ctx.body = { status: 'success', data: { url: fileUrl, }, }; }); // 启动服务器 app.listen(3000, () => { console.log('Server is running at http://localhost:3000'); }); ``` 这段代码实现了一个简单的文件上传功能,将上传的文件保存到本地的指定路径,并且返回上传文件对应的url。其中,createObjectURL函数可以将文件对象转换为url。需要注意的是,这个url只能在当前页面有效,如果需要在其他页面或者其他地方使用该文件,需要将文件上传到服务器并生成访问该文件的url。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

yma16

感谢支持!共勉!

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值